PageSourceSearch

https://jmvnews.com/pt-br/app-personalizado-para-radios-sorteios-s…reaming-de-video-solucao-completa-jmv-news/

html jmvnews.com collected 2026-10-02 01:33:02 UTC 267,749 bytes, 4,963 lines download raw bytes

1<!DOCTYPE html>
2<html lang="pt-BR">
3    <head>
4        <meta charset="utf-8">
5        <meta name="viewport" content="width=device-width, initial-scale=1">
6        <meta name="description" content="JMV News App: aplicativo personalizado e solução Cross Media para rádios, TVs e WebTVs com transmissão ao vivo, áudio on-demand, sorteios, pedidos de música e muito mais.">
7        <meta name="keywords" content="Solução completa para rádio, streaming rádio, app personalizado, JMV Technology, radio online, transmissão ao vivo">
8        <meta name="author" content="JMV Technology">
9        <meta name="robots" content="index, follow">
10        
11        <!-- Open Graph / Facebook -->
12        <meta property="og:type" content="website">
13        <meta property="og:url" content="/">
14        <meta property="og:title" content="JMV News App - Aplicativo Personalizado para Rádios e TVs | Cross Media">
15        <meta property="og:description" content="JMV News App: aplicativo personalizado e solução Cross Media para rádios, TVs e WebTVs com transmissão ao vivo, áudio on-demand, sorteios, pedidos de música e muito mais.">
16        <meta property="og:image" content="assets/images/logo-jmv-news-logomarca-oficial-app-para-radios-tv-streaming-jmv-technology.webp">
17        
18        <!-- Twitter -->
19        <meta property="twitter:card" content="summary_large_image">
20        <meta property="twitter:url" content="/">
21        <meta property="twitter:title" content="JMV News App - Aplicativo Personalizado para Rádios e TVs | Cross Media">
22        <meta property="twitter:description" content="JMV News App: aplicativo personalizado e solução Cross Media para rádios, TVs e WebTVs com transmissão ao vivo, áudio on-demand, sorteios, pedidos de música e muito mais.">
23        <meta property="twitter:image" content="assets/images/logo-jmv-news-logomarca-oficial-app-para-radios-tv-streaming-jmv-technology.webp">
24        
25        <link rel="canonical" href="/">
26        <title>JMV News App - Aplicativo Personalizado para Rádios e TVs | Cross Media</title>
27        
28        <!-- Preconnect for performance -->
29        <link rel="preconnect" href="https://fonts.googleapis.com">
30        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
31        <link rel="preconnect" href="https://cdnjs.cloudflare.com">
32        <link rel="preconnect" href="https://cdn.jsdelivr.net">
33        
34        <!-- Google Fonts - Poppins -->
35        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
36        
37        <!-- Font Awesome -->
38        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer">
39        
40        <!-- Swiper CSS -->
41        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
42        
43        <link rel="stylesheet" href="assets/build/css/main.css?id=533d5a074fc0916601580cbde23a337c">
44        
45        <!-- Structured Data -->
46        
46<script type="application/ld+json">
47        {
48            "@context": "https://schema.org",
49            "@type": "Organization",
50            "name": "JMV Technology",
51            "description": "Soluções Cross Media e de tecnologia para streaming, rádio e TV digital",
52            "url": "/",
53            "logo": "assets/images/logomarca-oficial-jmvstream-logo-identidade-visual-streaming-radio-online-tv-digital-webtv-app-personalizado-transmissao-ao-vivo-audio-video-tecnologia-jmv-technology.webp",
54            "sameAs": [
55                "https://www.facebook.com/jmvtechnology",
56                "https://www.instagram.com/jmvtechnology",
57                "https://www.linkedin.com/company/jmvtechnology"
58            ]
59        }
60        </script>
60
61        
62        <!-- Swiper JS -->
63        
63<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
63
64        
64<script defer src="assets/build/js/main.js?id=b463c846155476125526d5a4cedfdeff"></script>
64
65    <style>
66    /* ===== JMV News – Minimal Header ===== */
67    .lp-header {
68        position: fixed;
69        inset: 0 0 auto 0;
70        height: 64px;
71        z-index: 9999;
72        background: rgba(255,255,255,.97);
73        border-bottom: 1px solid rgba(0,0,0,.07);
74        box-shadow: 0 1px 14px rgba(0,0,0,.06);
75        backdrop-filter: blur(8px);
76        -webkit-backdrop-filter: blur(8px);
77        transition: box-shadow .25s, background .25s;
78    }
79    .lp-header.is-scrolled {
80        box-shadow: 0 4px 24px rgba(0,0,0,.10);
81        background: #fff;
82    }
83    .lp-header-inner {
84        max-width: 1280px;
85        margin: 0 auto;
86        padding: 0 32px;
87        height: 100%;
88        display: flex;
89        align-items: center;
90        justify-content: space-between;
91        gap: 16px;
92    }
93    .lp-logo-link {
94        display: flex;
95        align-items: center;
96        flex-shrink: 0;
97        text-decoration: none;
98        outline-offset: 4px;
99    }
100    .lp-logo-link img {
101        height: 36px;
102        width: auto;
103        display: block;
104        transition: opacity .2s;
105    }
106    .lp-logo-link:hover img { opacity: .8; }
107    .lp-header-nav {
108        display: flex;
109        align-items: center;
110        gap: 10px;
111        flex-shrink: 0;
112    }
113    .lp-btn-secondary {
114        display: inline-block;
115        color: #374151;
116        font-family: 'Poppins', sans-serif;
117        font-size: 13.5px;
118        font-weight: 500;
119        text-decoration: none;
120        padding: 8px 18px;
121        border-radius: 8px;
122        border: 1.5px solid #e5e7eb;
123        white-space: nowrap;
124        transition: background .18s, border-color .18s, color .18s;
125        outline-offset: 3px;
126    }
127    .lp-btn-secondary:hover {
128        background: #f9fafb;
129        border-color: #d1d5db;
130        color: #111827;
131    }
132    .lp-btn-primary {
133        display: inline-flex;
134        align-items: center;
135        gap: 7px;
136        background: #b91c1c;
137        color: #fff;
138        font-family: 'Poppins', sans-serif;
139        font-size: 13.5px;
140        font-weight: 600;
141        text-decoration: none;
142        padding: 10px 22px;
143        border-radius: 8px;
144        white-space: nowrap;
145        letter-spacing: .015em;
146        box-shadow: 0 2px 10px rgba(185,28,28,.28);
147        transition: background .18s, transform .15s, box-shadow .18s;
148        outline-offset: 3px;
149    }
150    .lp-btn-primary:hover {
151        background: #991b1b;
152        transform: translateY(-1px);
153        box-shadow: 0 6px 20px rgba(185,28,28,.40);
154        color: #fff;
155    }
156    .lp-btn-primary:active {
157        transform: translateY(0);
158        box-shadow: 0 2px 8px rgba(185,28,28,.22);
159    }
160    .lp-icon-arrow {
161        width: 14px; height: 14px;
162        flex-shrink: 0;
163        transition: transform .18s;
164    }
165    .lp-btn-primary:hover .lp-icon-arrow { transform: translateX(3px); }
166    @media (max-width: 768px) {
167        .lp-header-inner { padding: 0 20px; }
168        .lp-btn-secondary { display: none; }
169        .lp-btn-primary { font-size: 13px; padding: 9px 18px; }
170    }
171    @media (max-width: 480px) {
172        .lp-header { height: 56px; }
173        .lp-logo-link img { height: 28px; }
174        .lp-header-inner { padding: 0 16px; }
175        .lp-btn-primary { font-size: 12.5px; padding: 8px 14px; gap: 5px; }
176        .lp-icon-arrow { width: 12px; height: 12px; }
177    }
178    /* Header dark override (logo is white) */
179    .lp-header {
180        background: rgba(15,23,42,.98);
181        border-bottom: 1px solid rgba(255,255,255,.07);
182        box-shadow: 0 1px 14px rgba(0,0,0,.25);
183    }
184    .lp-header.is-scrolled {
185        background: #0f172a;
186        box-shadow: 0 4px 24px rgba(0,0,0,.45);
187    }
188    .lp-btn-secondary {
189        color: rgba(255,255,255,.72);
190        border-color: rgba(255,255,255,.18);
191    }
192    .lp-btn-secondary:hover {
193        background: rgba(255,255,255,.08);
194        border-color: rgba(255,255,255,.35);
195        color: #fff;
196    }
197    /* Footer layout */
198    .lp-footer-wrap {
199        display: flex;
200        flex-direction: column;
201        align-items: center;
202        gap: 18px;
203        text-align: center;
204    }
205    @media (min-width: 640px) {
206        .lp-footer-wrap {
207            flex-direction: row;
208            justify-content: space-between;
209            text-align: left;
210        }
211    }
212    .lp-footer-nav {
213        display: flex;
214        flex-wrap: wrap;
215        align-items: center;
216        justify-content: center;
217    }
218    .lp-footer-nav a {
219        color: #9ca3af;
220        font-size: 13px;
221        text-decoration: none;
222        padding: 2px 12px;
223        border-right: 1px solid rgba(255,255,255,.1);
224        transition: color .18s;
225        white-space: nowrap;
226    }
227    .lp-footer-nav a:last-child { border-right: none; }
228    .lp-footer-nav a:hover { color: #fff; }
229    .lp-footer-copy {
230        font-size: 11.5px;
231        color: #6b7280;
232        white-space: nowrap;
233    }
234    </style>
235    </head>
236    <body class="text-gray-900 antialiased" style="font-family: 'Poppins', sans-serif;">
237        <!-- Skip to main content link for accessibility -->
238        <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 bg-blue-600 text-white px-4 py-2 rounded-md z-50">
239            Pular para o conteúdo principal
240        </a>
241        <!-- Header Navigation -->
242        <header class="lp-header" role="banner">
243            <div class="lp-header-inner">
244                <a href="https://jmvnews.com/pt-br/" class="lp-logo-link" aria-label="JMV News — Voltar ao portal">
245                    <img
246                        src="assets/images/logo-jmv-news-logomarca-oficial-app-para-radios-tv-streaming-jmv-technology.webp"
247                        alt="JMV News — Portal de Notícias e Soluções Cross Media"
248                        width="140"
249                        height="40"
250                    >
251                </a>
252                <nav class="lp-header-nav" role="navigation" aria-label="Ações do cabeçalho">
253                    <a href="#cockpit-video" class="lp-btn-secondary">Cockpit</a>
254                    <a href="#planos-app-radio-jmv" class="lp-btn-secondary">Ver Planos</a>
255                    <a href="#contato-jmv-news-ecossistema-crossmedia" class="lp-btn-primary">
256                        Fale Conosco
257                        <svg class="lp-icon-arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="2" y1="8" x2="14" y2="8"/><polyline points="10,4 14,8 10,12"/></svg>
258                    </a>
259                </nav>
260            </div>
261        </header>
262        
262<script>(function(){var h=document.querySelector('.lp-header');if(h)window.addEventListener('scroll',function(){h.classList.toggle('is-scrolled',window.scrollY>8)},{passive:true});})();</script>
262
263
264        <!-- Main content -->
265        <main class="pt-16" id="main-content" role="main">
266            
267<!-- Hero Section -->
268<section class="relative min-h-screen flex items-center overflow-hidden" role="banner" aria-labelledby="hero-title">
269    <!-- Background Video -->
270    <video 
271        class="absolute inset-0 w-full h-full object-cover"
272        autoplay 
273        muted 
274        loop 
275        playsinline
276        aria-hidden="true"
277    >
278        <source src="assets/images/videos/video-background-jmv-news-site-streaming-radio-tv-webtv-aplicativo-digital-transmissao-ao-vivo-loop.mp4" type="video/mp4">
279        <track kind="descriptions" src="" srclang="pt" label="Vídeo de apresentação JMV News">
280    </video> 
281
282    <!-- Overlay -->
283    <div class="absolute inset-0 bg-gradient-to-r from-red-900/80 via-red-800/70 to-red-700/60" aria-hidden="true"></div>
284
285    <!-- Content Container -->
286    <div class="relative z-10 w-full">
287        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
288            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 sm:gap-8 lg:gap-12 items-center relative min-h-[80vh] px-4 sm:px-0">
289                
290                <!-- Vertical White Line Between Columns -->
291                <div class="hidden lg:block absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 h-80 w-px bg-white/80 z-10" aria-hidden="true"></div>
292                
293                <!-- Left Side - Smartphone Mockup -->
294                <div class="flex justify-center lg:justify-end order-2 lg:order-1 lg:-mr-24">
295                    <img 
296                        src="assets/images/mockup-app-para-radios-jmv-news-streaming-jmv-stream-jmv-technology-01.webp" 
297                        alt="Mockup do aplicativo Cross Media JMV News mostrando interface para rádios com player de música, sorteios e integração Spotify"
298                        class="w-96 sm:w-[28rem] md:w-[28rem] h-auto drop-shadow-2xl transform transition-transform duration-300 brightness-110 contrast-125 saturate-110 lg:w-auto"
299                        style="max-width: 800px;"
300                        width="400"
301                        height="800"
302                        loading="eager"
303                    >
304                </div>
305
306                <!-- Right Side - Content -->
307                <div class="text-white order-1 lg:order-2 text-center lg:text-left lg:pl-6 px-4 sm:px-6 lg:px-0">
308                    <!-- Main Title -->
309                    <h1 id="hero-title" class="text-3xl sm:text-4xl md:text-5xl lg:text-7xl font-bold leading-tight mb-4 sm:mb-6">
310                        <span class="block">Sua Rádio,</span>
311                        <span class="block italic font-bold text-2xl sm:text-3xl md:text-4xl lg:text-5xl mt-2">
312                            Muito além do Spotify.
313                        </span>
314                    </h1>
315
316                    <!-- Description -->
317                    <p class="text-base sm:text-lg md:text-xl lg:text-xl leading-relaxed mb-6 sm:mb-8 text-gray-200 max-w-xl sm:max-w-2xl mx-auto lg:mx-0">
318                        Chega de só transmitir: com nosso ecossistema Cross Media completo, sua rádio finalmente fideliza ouvintes e conquista faturamento de verdade no digital.
319                    </p>
320
321                    <!-- CTA Button -->
322                    <div class="flex justify-center lg:justify-start">
323                        <a href="#planos-app-radio-jmv" 
324                           class="inline-flex items-center px-6 sm:px-8 py-3 sm:py-4 bg-white text-red-800 font-semibold text-base sm:text-lg rounded-full hover:bg-gray-100 transform hover:scale-105 transition-all duration-300 shadow-xl hover:shadow-2xl group hover-reflect"
325                           aria-label="Conheça os planos disponíveis"
326                           title="Conheça os planos disponíveis">
327                            <span class="text-sm sm:text-base lg:text-lg">Conheça os planos</span>
328                            <i class="fas fa-arrow-right ml-2 sm:ml-3 text-sm sm:text-base group-hover:translate-x-1 transition-transform duration-300" aria-hidden="true"></i>
329                        </a>
330                    </div>
331                </div>
332            </div>
333        </div>
334    </div>
335
336    <!-- Scroll Indicator -->
337    <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 text-white animate-bounce" aria-label="Role para baixo para ver mais conteúdo">
338        <i class="fas fa-chevron-down text-2xl opacity-70" aria-hidden="true"></i>
339        <span class="sr-only">Role para baixo</span>
340    </div>
341</section><!-- Cockpit da Rádio - Seção Principal -->
342<section id="cockpit-da-radio" class="relative overflow-hidden py-24 px-4" aria-labelledby="cockpit-title">
343
344	<!-- Background Video -->
345	<video 
346		class="absolute inset-0 w-full h-full object-cover bg-video-dim"
347        autoplay 
348        muted 
349        loop 
350        playsinline
351        aria-hidden="true"
352    >
353        <source src="assets/images/videos/jmv-news-jmv-technology-cockpit-da-radio-cross-media-aplicativo-da-radio-plataforma-digital-jmv-news-background-oficial.mp4" type="video/mp4">
354        <track kind="descriptions" src="" srclang="pt" label="Vídeo de apresentação do Cockpit da Rádio JMV News">
355    </video> 
356	<div class="cockpit-bg-overlay" aria-hidden="true"></div>
357	
358	<div class="max-w-7xl mx-auto relative z-10">
359		
360		<div class="text-center max-w-4xl mx-auto mb-10">
361			<p class="text-sm text-indigo-300 uppercase tracking-wider mb-2">Cockpit da Rádio</p>
362			<h2 id="cockpit-title" class="text-3xl md:text-4xl lg:text-5xl font-bold leading-tight text-white">Pilote sua Rádio</h2>
363			<p class="text-gray-300 mt-4 mb-6 text-sm md:text-base leading-relaxed">
364				Conheça o <strong>Cockpit da Rádio</strong> — o CRM completo que finalmente <strong>profissionaliza</strong> o digital da sua emissora.
365Gerencie participações, denúncias, pedidos de música e interações em um só lugar. Aprove, reprove e publique com um fluxo <strong>organizado e integrado ao software de ao vivo da rádio.</strong>
366			</p>
367		</div>
368
369		<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
370			<div class="flex flex-col">
371				<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
372
373					<article class="feature-card p-6 rounded-2xl shadow-lg border border-white/5 transition transform hover:-translate-y-2 hover:scale-[1.02] hover-reflect">
374						<div class="flex items-start gap-4">
375							<svg class="w-8 h-8 text-indigo-400 mt-1 flex-shrink-0" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M12 2v6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 22v-6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M4.93 4.93l4.24 4.24" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M14.83 14.83l4.24 4.24" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
376							<div>
377								<h3 class="text-lg font-semibold text-white mb-2">Centralização & Gestão</h3>
378								<p class="text-gray-300 text-sm">Todas as interações do aplicativo, site e WhatsApp reunidas em um só lugar. Modere, classifique, aprove e publique sem perder nada — nem tempo, nem audiência.</p>
379							</div>
380						</div>
381					</article>
382
383					<article class="feature-card p-6 rounded-2xl shadow-lg border border-white/5 transition transform hover:-translate-y-2 hover:scale-[1.02] hover-reflect">
384						<div class="flex items-start gap-4">
385							<svg class="w-8 h-8 text-rose-400 mt-1 flex-shrink-0" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M12 3v18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M5 12h14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
386							<div>
387								<h3 class="text-lg font-semibold text-white mb-2">Gestão Facilitada</h3>
388								<p class="text-gray-300 text-sm">Kanban visual que simplifica tudo: gestão rápida, aprovação fácil, controle total do que entra no ar e painéis personalizados para locutor, marketing, jornalismo e direção. Operação leve, clara e sem fricção.</p>
389							</div>
390						</div>
391					</article>
392
393					<article class="feature-card p-6 rounded-2xl shadow-lg border border-white/5 transition transform hover:-translate-y-2 hover:scale-[1.02] hover-reflect">
394						<div class="flex items-start gap-4">
395							<svg class="w-8 h-8 text-yellow-400 mt-1 flex-shrink-0" viewB
395ox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M3 12h18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 3v18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
396							<div>
397								<h3 class="text-lg font-semibold text-white mb-2">Transcrição & Normalização</h3>
398								<p class="text-gray-300 text-sm">Transcrição instantânea e normalização automática do áudio: veja o conteúdo antes de ouvir e receba tudo pronto para entrar no ar com qualidade profissional.</p>
399							</div>
400						</div>
401					</article>
402
403					<article class="feature-card p-6 rounded-2xl shadow-lg border border-white/5 transition transform hover:-translate-y-2 hover:scale-[1.02] hover-reflect">
404						<div class="flex items-start gap-4">
405							<svg class="w-8 h-8 text-sky-400 mt-1 flex-shrink-0" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M3 12h3l3 8 4-16 3 8 3-8 3 16" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
406							<div>
407								<h3 class="text-lg font-semibold text-white mb-2">Relatórios & Métricas</h3>
408								<p class="text-gray-300 text-sm">Métricas reais da sua programação: engajamento, interações, sorteios, participação por programa e muito mais — dados que finalmente mostram o valor do seu digital.</p>
409							</div>
410						</div>
411					</article>
412				</div>
413
414				<div class="mt-8 flex gap-4 items-center">
415					<a href="#planos-app-radio-jmv" class="btn-primary hover-reflect hover-reflect--fast inline-flex items-center font-bold py-3 px-8 rounded-full shadow-lg transition">Conhecer Planos</a>
416					<a href="#cockpit-video" class="inline-flex items-center text-white/90 hover:text-white font-medium py-2 px-4 rounded-md transition smooth-scroll" title="Ver apresentação do Cockpit">Assistir à Apresentação em Vídeo <i class="fas fa-play ml-2 text-sm"></i></a>
417				</div>
418			</div>
419
420			<div class="relative z-10 flex items-center justify-center">
421				<div class="w-full max-w-4xl rounded-3xl overflow-hidden shadow-2xl hover-reflect">
422					<img src="assets/images/monitor-kanban-cockpit-radio-jmv-news-dashboard-digital-studio-radio-profissional-jmv-technology.webp" alt="Mockup do Cockpit da Rádio JMV — Kanban visual, caixa de entrada unificada e métricas em tempo real" class="w-full h-auto object-cover">
423				</div>
424			</div>
425		</div>
426	</div>
427
428	<div class="pointer-events-none absolute inset-0 -z-10 overflow-hidden">
429		<div class="absolute -top-24 -left-32 w-96 h-96 bg-rose-600/10 rounded-full blur-3xl"></div>
430		<div class="absolute -bottom-48 -right-40 w-[30rem] h-[30rem] bg-blue-600/8 rounded-full blur-3xl"></div>
431	</div>
432</section>
433
434
435
436
437<!-- Cockpit Video Presentation - Modern Minimalistic -->
438<section id="cockpit-video" class="relative px-4 bg-white/0 overflow-visible pt-24 -pb-48 bg-black">
439    <!-- Modern Gradient Animated Background -->
440    <div class="gradient-background pointer-events-none absolute inset-0 w-full h-full z-0">
441        <div class="gradient-sphere sphere-1"></div>
442        <div class="gradient-sphere sphere-2"></div>
443        <div class="gradient-sphere sphere-3"></div>
444        <div class="glow"></div>
445        <div class="grid-overlay"></div>
446        <div class="noise-overlay"></div>
447        <div class="particles-container" id="particles-container"></div>
448    </div>
449    <div class="max-w-6xl mx-auto relative z-10">
450        <div class="flex flex-col items-center justify-center">
451            <h3 class="text-2xl md:text-3xl lg:text-5xl font-bold text-white text-center pt-12">Apresentação do Cockpit</h3>
452            <p class="text-white text-center mb-10 max-w-5xl mx-auto text-sm md:text-base pt-8">Conheça em detalhes as funcionalidades que irão profissionalizar a opseração digital da sua rádio — transcrição, normalização, gerenciamento de participações e integração com ferramentas já utilizadas pela sua equipe.</p>
453
454            <!-- Video card (player) floating over the panels -->
455            <div class="video-card-wrapper">
456                <div class="video-card reveal-scale relative z-10 w-full max-w-5xl mt-12 aspect-video rounded-3xl overflow-hidden shadow-2xl border border-white/10 bg-black hover:scale-105 hover:rotate-1 transition-transform duration-300">
457                    <iframe allowfullscreen allow="fullscreen;" frameBorder="0" class="w-full h-full" src="https://player.jmvstream.com/RVctDBRpU1YWCXtK5HQurbLYEuBFGx/va571h833a32s61" aria-label="Apresentação do Cockpit da Rádio"></iframe>
458                </div>
459            </div>
460                <a href="#plano-crossmedia-titulo" class="video-cta inline-flex items-center md:mb-16 lg:mb-16 mb-8 bg-red-500 hover:bg-red-600 text-white font-bold text-lg md:text-xl py-4 px-8 rounded-full shadow-lg op
460acity-0 transform translate-y-3 transition-all duration-500 pointer-events-none hover-reflect" aria-hidden="true">Conhecer Planos</a>
461        </div>
462    </div>
463</section>
464
465
466
467<style>
468    @keyframes pulse-slow {
469        0%, 100% { opacity: 0.2; transform: scale(1); }
470        50% { opacity: 0.3; transform: scale(1.1); }
471    }
472    .animate-pulse-slow {
473        animation: pulse-slow 8s infinite ease-in-out;
474    }
475    .animate-pulse-subtle {
476        animation: pulse 3s infinite ease-in-out;
477    }
478    @keyframes float {
479        0%, 100% { transform: translateY(0) rotate(6deg); }
480        50% { transform: translateY(-10px) rotate(6deg); }
481    }
482    .animate-float {
483        animation: float 6s ease-in-out infinite;
484    }
485    @keyframes tilt {
486        0%, 50%, 100% { transform: rotate(0deg); }
487        25% { transform: rotate(0.5deg); }
488        75% { transform: rotate(-0.5deg); }
489    }
490    .animate-tilt {
491        animation: tilt 10s infinite linear;
492    }
493
494    /* New Background Effect CSS */
495    @font-face {
496        font-family: "Geist";
497        src: url("https://assets.codepen.io/605876/GeistVF.ttf") format("truetype");
498    }
499
500    :root {
501        --size: 20px;
502    }
503
504    .ia-bg-effect {
505        background: conic-gradient(from 180deg at 50% 70%,hsla(0,0%,98%,1) 0deg,#eec32d 72.0000010728836deg,#ec4b4b 144.0000021457672deg,#709ab9 216.00000858306885deg,#4dffbf 288.0000042915344deg,hsla(0,0%,98%,1) 1turn);
506        width: 100%;
507        height: 100%;
508        mask:
509            radial-gradient(circle at 50% 50%, white 2px, transparent 2.5px) 50% 50% / var(--size) var(--size),
510            url("https://assets.codepen.io/605876/noise-mask.png") 256px 50% / 256px 256px;
511        mask-composite: intersect;
512        animation: flicker 20s infinite linear;
513    }
514
515    @keyframes flicker {
516        to {
517            mask-position: 50% 50%, 0 50%;
518        }
519    }
520
521    #chat-sequence.start-chat .chat-message {
522        opacity: 1;
523        transform: translateY(0);
524    }
525</style>
526
527<script>
528document.addEventListener('DOMContentLoaded', () => {
529    const observer = new IntersectionObserver((entries) => {
530        entries.forEach(entry => {
531            if (entry.isIntersecting) {
532                entry.target.classList.add('start-chat');
533                observer.unobserve(entry.target);
534            }
535        });
536    }, { threshold: 0.5 });
537
538    const chatContainer = document.getElementById('chat-sequence');
539    if(chatContainer) observer.observe(chatContainer);
540});
541</script>
541
542<section class="relative py-24 lg:py-32 overflow-hidden" id="gamificacao" style="background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);">
543    <!-- Retro TV/Game Background Effects -->
544    <div class="absolute inset-0 z-0 pointer-events-none overflow-hidden">
545        <div class="noise"></div>
546        <div class="noise noise-moving"></div>
547        
548        <!-- Vignette Overlay -->
549        <div class="absolute inset-0 bg-[radial-gradient(circle_at_center,transparent_0%,rgba(0,0,0,0.6)_100%)] z-[5]"></div>
550        
551        <!-- Parallax Stars Background -->
552        <div id="stars"></div>
553        <div id="stars2"></div>
554        <div id="stars3"></div>
555        
556        <!-- HUD Elements -->
557        <div class="absolute top-8 left-8 font-['Press_Start_2P'] text-white/80 text-xs md:text-sm animate-pulse z-10 tracking-widest">
558            <span class="text-green-500">▶</span> PLAY
559        </div>
560        <div class="absolute top-8 right-8 font-['Press_Start_2P'] text-white/80 text-xs md:text-sm z-10 tracking-widest">
561            REC <span class="text-red-500 animate-pulse">●</span>
562        </div>
563    </div>
564
565    <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
566        <!-- Header -->
567        <div class="text-center mb-16 lg:mb-24">
568            <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 backdrop-blur-md mb-8">
569                <i class="fas fa-trophy text-yellow-400 text-xs"></i>
570                <span class="text-gray-300 text-xs font-bold tracking-wider uppercase font-sans">Engajamento & Fidelidade</span>
571            </div>
572            
573            <h2 class="glitch-title text-4xl md:text-5xl lg:text-7xl font-bold text-white mb-6 tracking-tight font-['Press_Start_2P'] leading-snug" data-text="GAMIFICAÇÃO">
574                GAMIFICAÇÃO
575            </h2>
576            
577            <p class="text-lg md:text-xl text-gray-400 max-w-3xl mx-auto leading-relaxed font-light font-sans">
578                Transforme ouvintes em fãs leais. Cada interação vale <span class="text-green-400 font-bold font-['Press_Start_2P'] text-xs mx-1">XP</span> que pode ser trocado por prêmios reais.
579            </p>
580        </div>
581
582        <!-- Main Content Grid -->
583        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
584            
585            <!-- Left: The "Game" Interface Card -->
586            <div class="relative group perspective-1000">
587                <div class="absolute -inset-1 bg-gradient-to-r from-green-500 via-blue-500 to-purple-600 rounded-3xl blur opacity-20 group-hover:opacity-40 transition duration-1000 animate-tilt"></div>
588                
589                <div class="relative bg-gray-900/90 border border-white/10 rounded-3xl p-6 md:p-8 backdrop-blur-xl overflow-hidden">
590                    <!-- User Profile Mockup -->
591                    <div class="flex items-center gap-4 mb-8 border-b border-white/10 pb-6">
592                        <div class="w-16 h-16 rounded-full bg-gradient-to-br from-purple-500 to-blue-500 p-1 shadow-[0_0_15px_rgba(168,85,247,0.5)]">
593                            <img src="https://i.pravatar.cc/150?img=11" alt="Avatar" class="w-full h-full rounded-full object-cover border-2 border-black">
594                        </div>
595                        <div class="flex-1">
596                            <div class="flex justify-between items-center mb-1">
597                                <h3 id="user-name" class="text-white font-bold font-sans text-lg">Carlos Henrique</h3>
598                                <span class="text-yellow-400 font-['Press_Start_2P'] text-[10px]">LVL 12</span>
599                            </div>
600                            <!-- XP Bar -->
601                            <div class="w-full h-3 bg-gray-800 rounded-full overflow-hidden border border-white/5 relative">
602                                <div id="xp-bar" class="absolute top-0 left-0 h-full bg-gradient-to-r from-green-400 to-emerald-600 w-0 shadow-[0_0_10px_rgba(74,222,128,0.5)] transition-all duration-3000 ease-out"></div>
603                            </div>
604                            <div class="flex justify-between mt-1">
605                                <span class="text-xs text-gray-500 font-sans">Próximo nível</span>
606                                <span id="xp-counter" class="text-xs text-green-400 font-['Press_Start_2P'] text-[8px]">0 / 3000 XP</span>
607                            </div>
608                        </div>
609                    </div>
610
611                    <!-- Actions List -->
612                    <div class="space-y-4 font-sans">
613                        <div class="flex items-center justify-between p-3 rounded-lg bg-white/5 border border-white/5 hover:border-green-500/30 transition-colors group/item">
614                            <div class="flex items-center gap-3">
615                                <div class="w-8 h-8 rounded bg-green-500/20 flex items-center justify-center text-green-400">
616                                    <i class="fas fa-music"></i>
617                                </div>
618                                <span class="text-gray-300 text-sm">Tempo de escuta: 1 hora</span>
619                            </div>
620                            <span class="text-green-400 font-bold text-sm group-hover/item:scale-110 transition-transform">+50 XP</span>
621                        </div>
622
623                        <div class="flex items-center justify-between p-3 rounded-lg bg-white/5 border border-white/5 hover:border-blue-500/30 transition-colors group/item">
624                            <div class="flex items-center gap-3">
625                                <div class="w-8 h-8 rounded bg-blue-500/20 flex items-center justify-center text-blue-400">
626                                    <i class="fas fa-share-alt"></i>
627                                </div>
628                                <span class="text-gray-300 text-sm">Compartilhar app</span>
629                            </div>
630                            <span class="text-blue-400 font-bold text-sm group-hover/item:scale-110 transition-transform">+100 XP</span>
631                        </div>
632
633                        <div class="flex items-center justify-between p-3 rounded-lg bg-white/5 border border-white/5 hover:border-purple-500/30 transition-colors group/item">
634                            <div class="flex items-center gap-3">
635                                <div class="w-8 h-8 rounded bg-purple-500/20 flex items-center justify-center text-purple-400">
636                                    <i class="fas fa-comment-alt"></i>
637                                </div>
638                                <span class="text-gray-300 text-sm">Enviar mensagem de áudio</span>
639                            </div>
640                            <span class="text-purple-400 font-bold text-sm group-hover/item:scale-110 transition-transform">+30 XP</span>
641                        </div>
642
643                        <div class="flex items-center justify-between p-3 rounded-lg bg-white/5 border border-white/5 hover:border-orange-500/30 transition-colors group/item">
644                            <div class="flex items-center gap-3">
645                                <div class="w-8 h-8 rounded bg-orange-500/20 flex items-center justify-center text-orange-400">
646                                    <i class="fas fa-fire"></i>
647                                </div>
648                                <span class="text-gray-300 text-sm">Ouvir rádio por 5 dias seguidos</span>
649                            </div>
650                            <span class="text-orange-400 font-bold text-sm group-hover/item:scale-110 transition-transform">+500 XP</span>
651                        </div>
652                    </div>
653                    
654                    <!-- Reward Unlock Notification -->
655                    <div class="mt-6 p-4 bg-gradient-to-r from-yellow-500/10 to-orange-500/10 border border-yellow-500/20 rounded-xl flex items-center justify-between animate-bounce-subtle">
656                        <div class="flex items-center gap-4">
657                            <div class="w-10 h-10 rounded-full bg-yellow-500/20 flex items-center justify-center text-yellow-400 flex-shrink-0">
658                                <i class="fas fa-gift text-lg"></i>
659                            </div>
660                            <div>
661                                <p class="text-yellow-200 text-xs font-bold uppercase mb-1">PRÊMIO DESBLOQUEADO!</p>
662                                <p class="text-white text-sm">Par de Ingressos - Cinema VIP</p>
663                            </div>
664                        </div>
665                        <button class="px-4 py-2 bg-yellow-500 text-black font-bold text-xs rounded hover:bg-yellow-400 transition-colors font-['Press_Start_2P']">
666                            RESGATAR
667                        </button>
668                    </div>
669                </div>
670            </div>
671
672            <!-- Right: Features Description -->
673            <div class="space-y-8 relative z-10">
674                <div class="group">
675                    <h3 class="text-2xl font-bold text-white mb-4 flex items-center gap-3">
676                        <span class="w-2 h-8 bg-green-500 rounded-full shadow-[0_0_10px_#22c55e]"></span>
677                        Pontuação Automática
678                    </h3>
679                    <p class="text-gray-400 leading-relaxed pl-5 border-l border-white/10 group-hover:border-green-500/50 transition-colors">
680                        O sistema rastreia automaticamente o tempo de escuta, compartilhamentos e interações. O ouvinte acumula pontos sem esforço, apenas curtindo sua rádio.
681                    </p>
682                </div>
683
684                <div class="group">
685                    <h3 class="text-2xl font-bold text-white mb-4 flex items-center gap-3">
686                        <span class="w-2 h-8 bg-blue-500 rounded-full shadow-[0_0_10px_#3b82f6]"></span>
687                        Loja de Prêmios
688                    </h3>
689                    <p class="text-gray-400 leading-relaxed pl-5 border-l border-white/10 group-hover:border-blue-500/50 transition-colors">
690                        Crie um catálogo de recompensas personalizado. De brindes exclusivos da rádio a ingressos para shows e vouchers de parceiros comerciais.
691                    </p>
692                </div>
693
694                <div class="group">
695                    <h3 class="text-2xl font-bold text-white mb-4 flex items-center gap-3">
696                        <span class="w-2 h-8 bg-purple-500 rounded-full shadow-[0_0_10px_#a855f7]"></span>
697                        Ranking & Competição
698                    </h3>
699                    <p class="text-gray-400 leading-relaxed pl-5 border-l border-white/10 group-hover:border-purple-500/50 transition-colors">
700                        Estimule a competição saudável com leaderboards semanais e mensais. Reconheça os "Super Fãs" da sua emissora ao vivo.
701                    </p>
702                </div>
703
704                <div class="pt-8">
705                    <a href="#contato-jmv-news-ecossistema-crossmedia" class="inline-flex items-center gap-3 px-8 py-4 bg-white text-black font-bold rounded-sm hover:bg-green-400 transition-all duration-300 font-['Press_Start_2P'] text-xs shadow-[4px_4px_0px_0px_rgba(255,255,255,0.3)] hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:-translate-y-1">
706                        CONHECER PLANOS
707                        <i class="fas fa-chevron-right"></i>
708                    </a>
709                </div>
710            </div>
711        </div>
712    </div>
713</section>
714
715<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>
vendor: 2 bytes, line 715
715
716<script>
717document.addEventListener('DOMContentLoaded', function() {
718    const section = document.getElementById('gamificacao');
719    const xpBar = document.getElementById('xp-bar');
720    const xpCounter = document.getElementById('xp-counter');
721    
722    const observer = new IntersectionObserver((entries) => {
723        entries.forEach(entry => {
724            if (entry.isIntersecting) {
725                animateXP();
726                observer.unobserve(section);
727            }
728        });
729    }, { threshold: 0.5 });
730    
731    observer.observe(section);
732    
733    function animateXP() {
734        let currentXP = 0;
735        const targetXP = 3000;
736        const duration = 5000; // 5 seconds for slower animation
737        const startTime = Date.now();
738        
739        function updateXP() {
740            const elapsed = Date.now() - startTime;
741            const progress = Math.min(elapsed / duration, 1);
742            currentXP = Math.floor(progress * targetXP);
743            
744            const percentage = (currentXP / targetXP) * 100;
745            xpBar.style.width = percentage + '%';
746            xpCounter.textContent = currentXP + ' / 3000 XP';
747            
748            if (progress < 1) {
749                requestAnimationFrame(updateXP);
750            } else {
751                // Trigger confetti when reaching 3000 XP
752                confetti({
753                    particleCount: 150,
754                    spread: 70,
755                    origin: { y: 0.6 }
756                });
757                // Update name to Superfã with fade effect
758                const nameEl = document.getElementById('user-name');
759                nameEl.style.opacity = '0';
760                nameEl.textContent = 'Carlos Henrique 👑';
761                setTimeout(() => nameEl.style.opacity = '1', 100);
762            }
763        }
764        
765        updateXP();
766    }
767
768    // Generate Space Background Stars
769    function generateSpaceBackground() {
770        const generateBoxShadow = (n) => {
771            let value = '';
772            for (let i = 0; i < n; i++) {
773                value += `${Math.floor(Math.random() * 2000)}px ${Math.floor(Math.random() * 2000)}px #FFF`;
774                if (i < n - 1) value += ', ';
775            }
776            return value;
777        };
778
779        const shadowsSmall = generateBoxShadow(700);
780        const shadowsMedium = generateBoxShadow(200);
781        const shadowsBig = generateBoxShadow(100);
782
783        const style = document.createElement('style');
784        style.innerHTML = `
785            #stars { box-shadow: ${shadowsSmall}; }
786            #stars:after { box-shadow: ${shadowsSmall}; }
787            #stars2 { box-shadow: ${shadowsMedium}; }
788            #stars2:after { box-shadow: ${shadowsMedium}; }
789            #stars3 { box-shadow: ${shadowsBig}; }
790            #stars3:after { box-shadow: ${shadowsBig}; }
791        `;
792        document.head.appendChild(style);
793    }
794    
795    generateSpaceBackground();
796});
797</script>
797
798
799<style>
800    @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
801
802    /* Noise Effect */
803    .noise {
804        position: absolute;
805        top: 0;
806        left: 0;
807        width: 100%;
808        height: 100%;
809        overflow: hidden;
810        z-index: 1;
811        opacity: 0.15;
812        pointer-events: none;
813        mix-blend-mode: screen;
814    }
815
816    .noise:before {
817        content: '';
818        position: absolute;
819        top: 0;
820        left: 0;
821        right: 0;
822        bottom: 0;
823        background: url('https://ice-creme.de/images/background-noise.png');
824        pointer-events: none;
825    }
826
827    .noise-moving {
828        opacity: 0.2;
829        z-index: 2;
830        mix-blend-mode: screen;
831    }
832
833    .noise-moving:before {
834        will-change: background-position;
835        animation: noise 1s infinite alternate;
836    }
837
838    /* Glitch Text Animation */
839    .glitch-title {
840        position: relative;
841        color: white;
842    }
843    
844    .glitch-title::before,
845    .glitch-title::after {
846        content: attr(data-text);
847        position: absolute;
848        top: 0;
849        left: 0;
850        width: 100%;
851        height: 100%;
852        background: transparent;
853    }
854
855    .glitch-title::before {
856        left: 2px;
857        text-shadow: -1px 0 #ff00c1;
858        clip: rect(44px, 450px, 56px, 0);
859        animation: glitch-anim 5s infinite linear alternate-reverse;
860    }
861
862    .glitch-title::after {
863        left: -2px;
864        text-shadow: -1px 0 #00fff9;
865        clip: rect(44px, 450px, 56px, 0);
866        animation: glitch-anim2 5s infinite linear alternate-reverse;
867    }
868
869    /* User Name Fade Transition */
870    #user-name {
871        transition: opacity 1s ease-in-out;
872    }
873
874    /* Parallax Stars Background */
875    #stars, #stars2, #stars3 {
876        position: absolute;
877        top: 0;
878        left: 0;
879        right: 0;
880        bottom: 0;
881        overflow: hidden;
882        z-index: 0;
883    }
884
885    #stars {
886        width: 1px;
887        height: 1px;
888        background: transparent;
889        animation: animStar 50s linear infinite;
890    }
891    
892    #stars:after {
893        content: " ";
894        position: absolute;
895        top: 2000px;
896        width: 1px;
897        height: 1px;
898        background: transparent;
899    }
900    
901    #stars2 {
902        width: 2px;
903        height: 2px;
904        background: transparent;
905        animation: animStar 100s linear infinite;
906    }
907    
908    #stars2:after {
909        content: " ";
910        position: absolute;
911        top: 2000px;
912        width: 2px;
913        height: 2px;
914        background: transparent;
915    }
916    
917    #stars3 {
918        width: 3px;
919        height: 3px;
920        background: transparent;
921        animation: animStar 150s linear infinite;
922    }
923    
924    #stars3:after {
925        content: " ";
926        position: absolute;
927        top: 2000px;
928        width: 3px;
929        height: 3px;
930        background: transparent;
931    }
932
933    @keyframes animStar {
934        from { transform: translateY(0px); }
935        to { transform: translateY(-2000px); }
936    }
937    @keyframes noise {
938        0%, 100% {background-position: 0 0;}
939        10% {background-position: -5% -10%;}
940        20% {background-position: -15% 5%;}
941        30% {background-position: 7% -25%;}
942        40% {background-position: 20% 25%;}
943        50% {background-position: -25% 10%;}
944        60% {background-position: 15% 5%;}
945        70% {background-position: 0 15%;}
946        80% {background-position: 25% 35%;}
947        90% {background-position: -10% 10%;}
948    }
949
950    @keyframes opacity {
951        0% {opacity: 0.3;}
952        20% {opacity: 0.1;}
953        35% {opacity: 0.2;}
954        50% {opacity: 0.4;}
955        60% {opacity: 0.2;}
956        80% {opacity: 0.3;}
957        100% {opacity: 0.3;}
958    }
959
960    @keyframes glitch-anim {
961        0% { clip: rect(30px, 9999px, 10px, 0); }
962        5% { clip: rect(80px, 9999px, 90px, 0); }
963        10% { clip: rect(10px, 9999px, 50px, 0); }
964        15% { clip: rect(60px, 9999px, 20px, 0); }
965        20% { clip: rect(20px, 9999px, 70px, 0); }
966        25% { clip: rect(90px, 9999px, 10px, 0); }
967        30% { clip: rect(10px, 9999px, 50px, 0); }
968        35% { clip: rect(50px, 9999px, 20px, 0); }
969        40% { clip: rect(20px, 9999px, 60px, 0); }
970        45% { clip: rect(70px, 9999px, 30px, 0); }
971        50% { clip: rect(30px, 9999px, 80px, 0); }
972        55% { clip: rect(80px, 9999px, 10px, 0); }
973        60% { clip: rect(10px, 9999px, 40px, 0); }
974        65% { clip: rect(40px, 9999px, 90px, 0); }
975        70% { clip: rect(90px, 9999px, 20px, 0); }
976        75% { clip: rect(20px, 9999px, 60px, 0); }
977        80% { clip: rect(60px, 9999px, 10px, 0); }
978        85% { clip: rect(10px, 9999px, 50px, 0); }
979        90% { clip: rect(50px, 9999px, 30px, 0); }
980        95% { clip: rect(30px, 9999px, 70px, 0); }
981        100% { clip: rect(70px, 9999px, 40px, 0); }
982    }
983
984    @keyframes glitch-anim2 {
985        0% { clip: rect(60px, 9999px, 20px, 0); }
986        5% { clip: rect(10px, 9999px, 50px, 0); }
987        10% { clip: rect(80px, 9999px, 10px, 0); }
988        15% { clip: rect(30px, 9999px, 70px, 0); }
989        20% { clip: rect(50px, 9999px, 30px, 0); }
990        25% { clip: rect(20px, 9999px, 60px, 0); }
991        30% { clip: rect(70px, 9999px, 40px, 0); }
992        35% { clip: rect(40px, 9999px, 90px, 0); }
993        40% { clip: rect(90px, 9999px, 20px, 0); }
994        45% { clip: rect(10px, 9999px, 50px, 0); }
995        50% { clip: rect(60px, 9999px, 10px, 0); }
996        55% { clip: rect(30px, 9999px, 80px, 0); }
997        60% { clip: rect(80px, 9999px, 20px, 0); }
998        65% { clip: rect(20px, 9999px, 60px, 0); }
999        70% { clip: rect(50px, 9999px, 30px, 0); }
1000        75% { clip: rect(10px, 9999px, 40px, 0); }
1001        80% { clip: rect(40px, 9999px, 90px, 0); }
1002        85% { clip: rect(90px, 9999px, 10px, 0); }
1003        90% { clip: rect(30px, 9999px, 70px, 0); }
1004        95% { clip: rect(70px, 9999px, 20px, 0); }
1005        100% { clip: rect(20px, 9999px, 50px, 0); }
1006    }
1007</style>
1008<section class="bg-gradient-to-b from-[#1a1a2e] to-[#16213e] py-12 px-4" aria-labelledby="recursos-title">
1009    <div class="max-w-4xl mx-auto text-center">
1010        <h2 id="recursos-title" class="text-3xl md:text-4xl font-bold text-white mb-2">
1011            Um <span class="text-red-500">Ecossistema</span> Completo
1012        </h2>
1013        <p class="text-gray-300 mb-10 text-sm md:text-base">
1014            Tecnologia avançada para conectar sua rádio diretamente com os ouvintes através de um aplicativo móvel completo e interativo.
1015        </p>
1016        
1017        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-8" role="list" aria-label="Recursos do aplicativo">
1018            <!-- Card 1 -->
1019            <article class="bg-gradient-to-br from-[#23235b] to-[#3a3a6c] rounded-xl p-6 shadow-lg hover:scale-105 hover:shadow-2xl transition-all duration-300 flex flex-col items-center hover-reflect" role="listitem">
1020                <i class="fas fa-music text-4xl text-white mb-4" aria-hidden="true"></i>
1021                <h3 class="text-lg font-semibold text-white mb-2">Spotify da Rádio</h3>
1022                <p class="text-gray-300 text-sm">Mais de 150 mil músicas para o ouvinte ouvir quando quiser. Sistema de busca inteligente e playlists personalizadas para sua programação.</p>
1023            </article>
1024            
1025            <!-- Card 2 -->
1026            <article class="bg-gradient-to-br from-[#23235b] to-[#3a3a6c] rounded-xl p-6 shadow-lg hover:scale-105 hover:shadow-2xl transition-all duration-300 flex flex-col items-center hover-reflect" role="listitem">
1027                <i class="fas fa-gift text-4xl text-white mb-4" aria-hidden="true"></i>
1028                <h3 class="text-lg font-semibold text-white mb-2">Sorteios Automatizados</h3>
1029                <p class="text-gray-300 text-sm">Login facilitado com conta Google ou Apple. Participação em apenas 2 cliques. Sorteios transparentes e automáticos que aumentam o engajamento.</p>
1030            </article>
1031            
1032            <!-- Card 3 -->
1033            <article class="bg-gradient-to-br from-[#23235b] to-[#3a3a6c] rounded-xl p-6 shadow-lg hover:scale-105 hover:shadow-2xl transition-all duration-300 flex flex-col items-center hover-reflect" role="listitem">
1034                <i class="fas fa-star text-4xl text-white mb-4" aria-hidden="true"></i>
1035                <h3 class="text-lg font-semibold text-white mb-2">Top 10 Exclusivo</h3>
1036                <p class="text-gray-300 text-sm">Motive sua audiência exibindo um ranking sempre atualizado das músicas mais tocadas na sua emissora.</p>
1037            </article>
1038            
1039            <!-- Card 4 -->
1040            <article class="bg-gradient-to-br from-[#23235b] to-[#3a3a6c] rounded-xl p-6 shadow-lg hover:scale-105 hover:shadow-2xl transition-all duration-300 flex flex-col items-center hover-reflect" role="listitem">
1041                <i class="fas fa-broadcast-tower text-4xl text-white mb-4" aria-hidden="true"></i>
1042                <h3 class="text-lg font-semibold text-white mb-2">Player ao Vivo</h3>
1043                <p class="text-gray-300 text-sm">Transmissão ao vivo do produto 24h por dia, com controle de áudio superior e compatibilidade multi-plataforma.</p>
1044            </article>
1045            
1046            <!-- Card 5 -->
1047            <article class="bg-gradient-to-br from-[#23235b] to-[#3a3a6c] rounded-xl p-6 shadow-lg hover:scale-105 hover:shadow-2xl transition-all duration-300 flex flex-col items-center hover-reflect" role="listitem">
1048                <i class="fas fa-robot text-4xl text-white mb-4" aria-hidden="true"></i>
1049                <h3 class="text-lg font-semibold text-white mb-2">Notícias Automáticas com I.A</h3>
1050                <p class="text-gray-300 text-sm">Conteúdo sempre atualizado e relevante para manter seus ouvintes informados e engajados.</p>
1051            </article>
1052            
1053            <!-- Card 6 -->
1054            <article class="bg-gradient-to-br from-[#23235b] to-[#3a3a6c] rounded-xl p-6 shadow-lg hover:scale-105 hover:shadow-2xl transition-all duration-300 flex flex-col items-center hover-reflect" role="listitem">
1055                <i class="fas fa-bell text-4xl text-white mb-4" aria-hidden="true"></i>
1056                <h3 class="text-lg font-semibold text-white mb-2">Push Notifications</h3>
1057                <p class="text-gray-300 text-sm">
1057Envie avisos instantâneos para os ouvintes sobre promoções, sorteios, notícias e novidades da programação, mantendo todos sempre informados e engajados.</p>
1058            </article>
1059        </div>
1060        
1061        <div class="flex flex-col sm:flex-row justify-center gap-4" role="group" aria-label="Ações principais">
1062            <a href="#contato-jmv-news-ecossistema-crossmedia" 
1063               class="bg-red-500 hover:bg-red-600 text-white font-bold py-3 px-8 rounded-full shadow-lg transition-all duration-300 text-base hover-reflect"
1064               title="Entre em contato para saber mais sobre nossos serviços"
1065               aria-label="Entre em contato conosco">
1066                Entre em Contato
1067            </a>
1068        </div>
1069    </div>
1070</section><section class="bg-gradient-to-r from-[#8e2de2] via-[#a4508b] to-[#c471f5] py-12 px-4" aria-labelledby="porque-escolher-title">
1071    <div class="max-w-6xl mx-auto text-center">
1072        <h2 id="porque-escolher-title" class="text-3xl md:text-4xl font-bold text-white mb-2">
1073            Por que escolher nossa solução?
1074        </h2>
1075        <p class="text-gray-200 mb-10 text-sm md:text-base max-w-2xl mx-auto">
1076Nossa solução vai além do streaming tradicional. Criamos um ecossistema completo que valoriza sua marca, aumenta sua audiência e abre novas oportunidades de monetização.
1077
1078        </p>
1079        
1080        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 mb-10" role="list" aria-label="Vantagens da nossa solução">
1081            <!-- Card 1 -->
1082            <article class="bg-transparent rounded-xl p-6 flex flex-col items-center transition-all duration-300 hover:bg-white/10 hover:scale-105 hover:shadow-2xl border-t-4 border-white/20 hover-reflect" role="listitem">
1083                <div class="bg-white rounded-full w-16 h-16 mb-4 shadow-lg flex items-center justify-center" aria-hidden="true">
1084                    <i class="fas fa-mobile-alt text-3xl text-[#a4508b]"></i>
1085                </div>
1086                <h3 class="text-lg font-semibold text-white mb-2">App Exclusivo</h3>
1087                <p class="text-gray-200 text-sm">Chega de depender de Spotify, WhatsApp ou redes sociais: sua rádio ganha um aplicativo próprio com a identidade visual da sua marca!</p>
1088            </article>
1089            
1090            <!-- Card 2 -->
1091            <article class="bg-transparent rounded-xl p-6 flex flex-col items-center transition-all duration-300 hover:bg-white/10 hover:scale-105 hover:shadow-2xl border-t-4 border-white/20 hover-reflect" role="listitem">
1092                <div class="bg-white rounded-full w-16 h-16 mb-4 shadow-lg flex items-center justify-center" aria-hidden="true">
1093                    <i class="fas fa-search text-3xl text-[#a4508b]"></i>
1094                </div>
1095                <h3 class="text-lg font-semibold text-white mb-2">SEO Otimizado</h3>
1096                <p class="text-gray-200 text-sm">Seu app publicado na Google Play e App Store e seu site otimizado para o Google, garantindo que sua rádio apareça no topo das pesquisas.</p>
1097            </article>
1098            
1099            <!-- Card 3 -->
1100            <article class="bg-transparent rounded-xl p-6 flex flex-col items-center transition-all duration-300 hover:bg-white/10 hover:scale-105 hover:shadow-2xl border-t-4 border-white/20 hover-reflect" role="listitem">
1101                <div class="bg-white rounded-full w-16 h-16 mb-4 shadow-lg flex items-center justify-center" aria-hidden="true">
1102                    <i class="fas fa-robot text-3xl text-[#a4508b]"></i>
1103                </div>
1104                <h3 class="text-lg font-semibold text-white mb-2">Notícias com I.A</h3>
1105                <p class="text-gray-200 text-sm">Conteúdo de notícias gerado por I.A. que mantém sua audiência informada, engajada e conectada ao seu app o tempo todo.</p>
1106            </article>
1107            
1108            <!-- Card 4 -->
1109            <article class="bg-transparent rounded-xl p-6 flex flex-col items-center transition-all duration-300 hover:bg-white/10 hover:scale-105 hover:shadow-2xl border-t-4 border-white/20 hover-reflect" role="listitem">
1110                <div class="bg-white rounded-full w-16 h-16 mb-4 shadow-lg flex items-center justify-center" aria-hidden="true">
1111                    <i class="fas fa-layer-group text-3xl text-[#a4508b]"></i>
1112                </div>
1113                <h3 class="text-lg font-semibold text-white mb-2">Plataforma Completa</h3>
1114                <p class="text-gray-200 text-sm">Unifique streaming de áudio, vídeo, podcast, músicas, notícias e interação em uma única plataforma. Experiência completa que mantém seus ouvintes sempre conectados!</p>
1115            </article>
1116        </div>
1117        
1118        <div class="flex flex-col sm:flex-row justify-center gap-4" role="group" aria-label="Ações principais">
1119            <a href="#contato-jmv-news-ecossistema-crossmedia" 
1120               class="bg-white text-[#a4508b] font-bold py-3 px-8 rounded-full shadow-lg transition-all duration-300 text-base hover:bg-[#a4508b] hover:text-white hover:scale-105"
1121               title="Solicite seu aplicativo personalizado"
1122               aria-label="Solicitar aplicativo personalizado para rádio">
1123                Quero Meu Aplicativo Personalizado
1124            </a>
1125           
1126        </div>
1127    </div>
1128</section><section class="py-24 px-4 relative bg-black" aria-labelledby="conheca-app-title">
1129    <!-- Overlay para melhorar legibilidade do texto -->
1130    <div class="absolute inset-0 bg-black/50" aria-hidden="true"></div>
1131    
1132    <div class="max-w-6xl mx-auto flex flex-col lg:flex-row items-center gap-10 relative z-10">
1133        <!-- Mockup do Smartphone -->
1134        <div class="w-full lg:w-1/2 flex justify-center" role="img" aria-label="Demonstração das telas do aplicativo JMV News">
1135            <div class="relative">
1136                <!-- Smartphone Frame -->
1137                <div class="relative w-[300px] h-[600px] bg-black rounded-[3rem] border-[3px] border-gray-700 shadow-2xl p-1" role="presentation">
1138                    <!-- Screen -->
1139                    <div class="w-full h-full bg-white rounded-[2.3rem] overflow-hidden relative">
1140                        <!-- Top notch (iPhone style) -->
1141                        <div class="absolute top-0 left-1/2 transform -translate-x-1/2 w-32 h-6 bg-black rounded-b-xl z-10" aria-hidden="true"></div>
1142
1143                        <!-- Swiper Container -->
1144                        <div class="swiper mySwiper w-full h-full" role="region" aria-label="Galeria de telas do aplicativo" aria-l
1144ive="polite">
1145                            <div class="swiper-wrapper">
1146                                <!-- 1. Tela Inicial -->
1147                                <div class="swiper-slide flex justify-center items-center" role="group" aria-label="Slide 1 de 10">
1148                                    <img src="assets/images/telas-jmv-news/tela-inicial-app-para-radios-jmv-news-jmv-technology-home-streaming-noticias-programacao.jpeg" 
1149                                        alt="Tela inicial do aplicativo Cross Media JMV News mostrando home com streaming, notícias e programação" 
1150                                         class="w-full h-full object-cover"
1151                                         loading="lazy"
1152                                         width="300"
1153                                         height="600" />
1154                                </div>
1155                                
1156                                <!-- 2. Contatos -->
1157                                <div class="swiper-slide flex justify-center items-center" role="group" aria-label="Slide 2 de 10">
1158                                    <img src="assets/images/telas-jmv-news/contatos-app-para-radios-jmv-news-jmv-technology-integracao-multicanal-email-whatsapp-redes-sociais.jpeg" 
1159                                         alt="Tela de contatos com integração multicanal incluindo email, WhatsApp e redes sociais" 
1160                                         class="w-full h-full object-cover"
1161                                         loading="lazy"
1162                                         width="300"
1163                                         height="600" />
1164                                </div>
1165                                
1166                                <!-- 3. Player Ao Vivo -->
1167                                <div class="swiper-slide flex justify-center items-center" role="group" aria-label="Slide 3 de 10">
1168                                    <img src="assets/images/telas-jmv-news/player-de-musica-spotify-da-radio-audio-on-demand-app-para-radios-jmv-news-jmv-technology.jpeg" 
1169                                         alt="Player de música tipo Spotify da rádio com funcionalidade de áudio on-demand" 
1170                                         class="w-full h-full object-cover"
1171                                         loading="lazy"
1172                                         width="300"
1173                                         height="600" />
1174                                </div>
1175                                
1176                                <!-- 4. Programação Semanal -->
1177                                <div class="swiper-slide flex justify-center items-center" role="group" aria-label="Slide 4 de 10">
1178                                    <img src="assets/images/telas-jmv-news/programacao-semanal-app-para-radios-jmv-news-jmv-technology-grade-de-horarios.jpeg" 
1179                                         alt="Programação semanal da rádio com grade de horários completa" 
1180                                         class="w-full h-full object-cover"
1181                                         loading="lazy"
1182                                         width="300"
1183                                         height="600" />
1184                                </div>
1185                                
1186                                <!-- 5. Top 10 Músicas -->
1187                                <div class="swiper-slide flex justify-center items-center" role="group" aria-label="Slide 5 de 10">
1188                                    <img src="assets/images/telas-jmv-news/top-10-musicas-app-para-radios-jmv-news-jmv-technology-ranking-musical-fidelizacao.jpeg" 
1189                                         alt="Top 10 das músicas mais tocadas na rádio com ranking musical para fidelização" 
1190                                         class="w-full h-full object-cover"
1191                                         loading="lazy"
1192                                         width="300"
1193                                         height="600" />
1194                                </div>
1195                                
1196                                <!-- 6. Notícias -->
1197                                <div class="swiper-slide flex justify-center items-center" role="group" aria-label="Slide 6 de 10">
1198                                    <img src="assets/images/telas-jmv-news/noticias-app-para-radios-jmv-news-jmv-technology-conteudo-digital-informacao-em-tempo-real.jpeg" 
1199                                         alt="Seção de notícias com conteúdo digital e informações em tempo real" 
1200                                         class="w-full h-full object-cover"
1201                                         loading="lazy"
1202                                         width="300"
1203                                         height="600" />
1204                                </div>
1205                                
1206                                <!-- 7. Pedidos de Música -->
1207                                <div class="swiper-slide flex justify-center items-center" role="group" aria-label="Slide 7 de 10">
1208                                    <img src="assets/images/telas-jmv-news/pedidos-de-musica-app-para-radios-jmv-news-jmv-technology-interatividade-engajamento.jpeg" 
1209                                         alt="Tela de pedidos de música promovendo interatividade e engajamento com ouvintes" 
1210                                         class="w-full h-full object-cover"
1211                                         loading="lazy"
1212                                         width="300"
1213                                         height="600" />
1214                                </div>
1215                                
1216                                <!-- 8. Sorteios -->
1217                                <div class="swiper-slide flex justify-center items-center" role="group" aria-label="Slide 8 de 10">
1218                                    <img src="assets/images/telas-jmv-news/sorteios-automatizados-app-para-radios-jmv-news-jmv-technology-engajamento-fidelizacao.jpeg" 
1219                                         alt="Sistema de sorteios automatizados para engajamento e fidelização de ouvintes" 
1220                                         class="w-full h-full object-cover"
1221                                         loading="lazy"
1222                                         width="300"
1223                                         height="600" />
1224                                </div>
1225                                
1226                                <!-- 9. Catálogo Musical -->
1227                                <div class="swiper-slide flex justify-center items-center" role="group" aria-label="Slide 9 de 10">
1228                                    <img src="assets/images/telas-jmv-news/spotify-da-radio-audio-on-demand-app-para-radios-jmv-news-jmv-technology-catalogo-musical-galeria-de-audio.jpeg" 
1229                                         alt="Catálogo musical tipo Spotify da rádio com galeria de áudio on-demand" 
1230                                         class="w-full h-full object-cover"
1231                                         loading="lazy"
1232                                         width="300"
1233                                         height="600" />
1234                                </div>
1235                                
1236                                <!-- 10. Galeria de Vídeos -->
1237                                <div class="swiper-slide flex justify-center items-center" role="group" aria-label="Slide 10 de 10">
1238                                    <img src="assets/images/telas-jmv-news/videos-app-p
1238ara-radios-jmv-news-jmv-technology-galeria-de-conteudo-exclusivo-streaming.jpeg" 
1239                                         alt="Galeria de vídeos exclusivos com conteúdo de streaming da rádio" 
1240                                         class="w-full h-full object-cover"
1241                                         loading="lazy"
1242                                         width="300"
1243                                         height="600" />
1244                                </div>
1245                            </div>
1246                        </div>
1247
1248                        <!-- Home indicator (iPhone style) -->
1249                        <div class="absolute bottom-2 left-1/2 transform -translate-x-1/2 w-32 h-1 bg-black rounded-full opacity-30 z-10" aria-hidden="true"></div>
1250                    </div>
1251
1252                    <!-- Side buttons (maiores) -->
1253                    <div class="absolute -left-[6px] top-20 w-[6px] h-8 bg-gray-500 rounded-l-sm" aria-hidden="true"></div>
1254                    <div class="absolute -left-[6px] top-32 w-[6px] h-12 bg-gray-500 rounded-l-sm" aria-hidden="true"></div>
1255                    <div class="absolute -left-[6px] top-48 w-[6px] h-12 bg-gray-500 rounded-l-sm" aria-hidden="true"></div>
1256                    <div class="absolute -right-[6px] top-28 w-[6px] h-16 bg-gray-500 rounded-r-sm" aria-hidden="true"></div>
1257                </div>
1258
1259                <!-- Botões de navegação externos -->
1260                <div class="absolute top-1/2 -translate-y-1/2 -left-12">
1261                    <button class="swiper-button-prev-custom w-8 h-8 bg-white/20 hover:bg-white/30 rounded-full flex items-center justify-center text-white transition-all duration-200"
1262                            aria-label="Slide anterior"
1263                            title="Ver tela anterior do aplicativo">
1264                        <i class="fas fa-chevron-left text-sm" aria-hidden="true"></i>
1265                    </button>
1266                </div>
1267                <div class="absolute top-1/2 -translate-y-1/2 -right-12">
1268                    <button class="swiper-button-next-custom w-8 h-8 bg-white/20 hover:bg-white/30 rounded-full flex items-center justify-center text-white transition-all duration-200"
1269                            aria-label="Próximo slide"
1270                            title="Ver próxima tela do aplicativo">
1271                        <i class="fas fa-chevron-right text-sm" aria-hidden="true"></i>
1272                    </button>
1273                </div>
1274
1275                <!-- Paginação externa -->
1276                <div class="swiper-pagination-custom flex justify-center gap-2 mt-4" role="tablist" aria-label="Indicadores de slides"></div>
1277
1278                <!-- Reflection effect -->
1279                <div class="absolute inset-0 bg-gradient-to-tr from-transparent via-white/5 to-white/20 rounded-[3rem] pointer-events-none" aria-hidden="true"></div>
1280            </div>
1281        </div>
1282
1283        <!-- Texto explicativo -->
1284        <div class="w-full lg:w-1/2 mt-10 lg:mt-0">
1285            <div class="relative group bg-gradient-to-br from-black/80 via-black/70 to-black/60 backdrop-blur-sm rounded-2xl p-8 md:p-10 border border-white/10 shadow-xl shadow-black/40
1286                        transition-all duration-500 ease-out
1287                        hover:from-black/85 hover:via-black/75 hover:to-black/70
1288                        hover:shadow-2xl hover:shadow-blue-600/20 hover:-translate-y-1 hover:border-blue-500/20 hover-reflect">
1289                <div class="absolute inset-0 rounded-2xl ring-1 ring-white/5 pointer-events-none transition-colors duration-500 group-hover:ring-blue-500/20" aria-hidden="true"></div>
1290                <div class="pointer-events-none absolute -inset-px rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-700" aria-hidden="true">
1291                    <div class="absolute inset-0 rounded-2xl bg-gradient-to-tr from-blue-500/5 via-transparent to-blue-400/10 blur-sm"></div>
1292                </div>
1293
1294                <h2 id="conheca-app-title" class="text-2xl md:text-3xl font-bold text-white mb-4">Conheça o Aplicativo</h2>
1295                <p class="text-gray-200 mb-3">
1296                    Seu aplicativo não é apenas uma extensão da sua rádio — <span class="font-bold text-white">é um novo palco digital para sua marca.</span>
1297                </p>
1298                <p class="text-gray-300 mb-3">
1299                    Aqui você pode ver, na prática, como cada recurso se integra para criar um <span class="text-yellow-400 font-semibold">ecossistema completo</span>: o player ao vivo com <span class="text-yellow-400 font-semibold">qualidade profissional</span>, o catálogo on-demand que coloca sua programação <span class="font-semibold text-white">no mesmo nível dos grandes players</span>.
1300                </p>
1301                <p class="text-gray-300 mb-3">
1302                    Os sorteios em <span class="font-semibold text-white">apenas dois cliques</span> fidelizam ouvintes, o espaço para pedidos de música aproxima a audiência e a seção de notícias mantém todos informados sem precisar sair do app.
1303                </p>
1304                <p class="italic text-gray-400">
1305                    Navegue pelas telas e descubra como sua rádio pode oferecer uma <span class="text-yellow-400 font-semibold">experiência moderna</span>, <span class="text-yellow-400 font-semibold">envolvente</span> e <span class="text-yellow-400 font-semibold">exclusiva</span> para cada ouvinte.
1306                </p>
1307            </div>
1308        </div>
1309    </div>
1310</section>
1311
1312<!-- Custom Swiper Styles -->
1313<style>
1314    .swiper-pagination-custom .pagination-bullet {
1315        width: 8px;
1316        height: 8px;
1317        background: #fff;
1318        opacity: 0.5;
1319        border-radius: 50%;
1320        cursor: pointer;
1321        transition: all 0.3s ease;
1322    }
1323    .swiper-pagination-custom .pagination-bullet.active {
1324        opacity: 1;
1325        background: #ef4444;
1326        transform: scale(1.2);
1327    }
1328</style>
1329
1330<!-- Swiper.js: inicialização do slider -->
1331<script>
1332    document.addEventListener('DOMContentLoaded', function () {
1333        const swiper = new Swiper('.mySwiper', {
1334            loop: true,
1335            autoplay: {
1336                delay: 4000,
1337                disableOnInteraction: false,
1338            },
1339            effect: 'slide',
1340            grabCursor: true,
1341            speed: 500,
1342            on: {
1343                init: function () {
1344                    createCustomPagination(this);
1345                },
1346                slideChange: function () {
1347                    updateCustomPagination(this);
1348                }
1349            }
1350        });
1351
1352        // Botões customizados
1353        document.querySelector('.swiper-button-prev-custom').addEventListener('click', () => {
1354            swiper.slidePrev();
1355        });
1356
1357        document.querySelector('.swiper-button-next-custom').addEventListener('click', () => {
1358            swiper.slideNext();
1359        });
1360
1361        // Função para criar paginação customizada
1362        function createCustomPagination(swiper) {
1363            const paginationContainer = document.querySelector('.swiper-pagination-custom');
1364            paginationContainer.innerHTML = '';
1365            
1366            // Conta slides reais (sem duplicatas do loop)
1367            const realSlidesCount = swiper.slides.length - 2; // Removes duplicate slides added by loop
1368            
1369            for (let i = 0; i < realSlidesCount; i++) {
1370                const bullet = document.createElement('div');
1371                bullet.classList.add('pagination-bullet');
1372                if (i === 0) bullet.classList.add('active');
1373                bullet.addEventListener('click', () => swiper.slideTo(i + 1)); // +1 por causa do loop
1374                paginationContainer.appendChild(bullet);
1375            }
1376        }
1377
1378        // Função para atualizar paginação customizada
1379        function updateCustomPagination(swiper) {
1380            const bullets = document.querySelectorAll('.pagination-bullet');
1381            bullets.forEach((bullet, index) => {
1382                bullet.classList.toggle('active', index === swiper.realIndex);
1383            });
1384        }
1385    });
1386</script>
1386<section class="py-24 px-4 relative overflow-hidden min-h-screen flex items-center bg-black" aria-labelledby="spotify-radio-title">
1387    <!-- Background Image -->
1388    <div class="absolute inset-0 z-0" role="img" aria-label="Fundo com ondas vibrantes representando streaming de música">
1389        <img src="assets/images/fundo-background-spotify-da-radio-audio-on-demand-catalogo-musical-jmv-news-jmv-technology-abstrato-ondas-vibrantes.webp" 
1390             alt="Fundo abstrato com ondas vibrantes representando streaming de música e catálogo musical" 
1391             class="w-full h-full object-cover opacity-30"
1392             loading="lazy"
1393             width="1920"
1394             height="1080" />
1395        <!-- Overlay para melhorar contraste -->
1396        <div class="absolute inset-0 bg-black/20" aria-hidden="true"></div>
1397    </div>
1398    
1399    <div class="max-w-7xl mx-auto flex flex-col lg:flex-row items-center gap-10 relative z-20">
1400        <!-- Conteúdo textual -->
1401        <article class="w-full lg:w-1/2 text-white">
1402            <div class="relative group bg-gradient-to-br from-black/80 via-black/70 to-black/60 backdrop-blur-sm rounded-2xl p-8 md:p-10 border border-white/10 shadow-xl shadow-black/40
1403                        transition-all duration-500 ease-out
1404                        hover:from-black/85 hover:via-black/75 hover:to-black/70
1405                        hover:shadow-2xl hover:shadow-red-600/20 hover:-translate-y-1 hover:border-red-500/20 hover-reflect">
1406                <div class="absolute inset-0 rounded-2xl ring-1 ring-white/5 pointer-events-none transition-colors duration-500 group-hover:ring-red-500/20" aria-hidden="true"></div>
1407                <div class="pointer-events-none absolute -inset-px rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-700" aria-hidden="true">
1408                    <div class="absolute inset-0 rounded-2xl bg-gradient-to-tr from-red-500/5 via-transparent to-red-400/10 blur-sm"></div>
1409                </div>
1410
1411                <h2 id="spotify-radio-title" class="text-3xl md:text-4xl lg:text-5xl font-bold mb-6 leading-tight">
1412                    O Spotify da Rádio
1413                </h2>
1414                
1415                <p class="text-gray-300 text-lg mb-6 leading-relaxed">
1416                    Vá além dos grandes players de streaming.
1417                </p>
1418                
1419                <div class="space-y-4 mb-8" role="list" aria-label="Benefícios do catálogo musical on-demand">
1420                    <p class="text-gray-200 leading-relaxed" role="listitem">
1421                        Com o recurso de áudio on-demand, disponível para rádios que já contribuem com o 
1422                        <abbr title="Escritório Central de Arrecadação e Distribuição" class="font-bold text-white">ECAD</abbr>, seu aplicativo se transforma em um 
1423                        <strong class="font-bold text-yellow-400">catálogo musical exclusivo</strong>, totalmente com a cara da sua marca.
1424                    </p>
1425                    
1426                    <p class="text-gray-200 leading-relaxed" role="listitem">
1427                        Mais do que tocar músicas, sua rádio oferece liberdade para o ouvinte escolher 
1428                        <strong class="font-bold text-white">artistas, estilos, e criar suas próprias playlists personalizadas</strong>, em um ambiente livre de distrações — algo que nem o Spotify entrega: 
1429                        <strong class="font-bold text-yellow-400">a experiência premium de ouvir tudo dentro do seu próprio app</strong>.
1430                    </p>
1431                </div>
1432                
1433                <a href="#contato-jmv-news-ecossistema-crossmedia" 
1434                   class="inline-flex items-center bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-lg transition-all duration-300 transform hover:scale-105 shadow-lg focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-black hover-reflect"
1435                   aria-label="Entrar em contato com especialista sobre catálogo musical"
1436                   title="Falar com especialista sobre implementação do catálogo musical">
1437                    <i class="fas fa-comments mr-2" aria-hidden="true"></i>
1438                    Falar com um Especialista
1439                </a>
1440            </div>
1441        </article>
1442
1443        <!-- Mockup do Smartphone com vídeo -->
1444        <div class="w-full lg:w-1/2 flex justify-center" role="img" aria-label="Demonstração em vídeo do catálogo musical no aplicativo">
1445            <div class="relative">
1446    
1447                <!-- Smartphone Frame -->
1448                <div class="relative w-[280px] h-[560px] bg-black rounded-[3rem] border-[3px] border-gray-700 shadow-2xl p-1 z-30" role="presentation">
1449                    <!-- Screen -->
1450                    <div class="w-full h-full bg-black rounded-[2.3rem] overflow-hidden relative">
1451                        <!-- Top notch (iPhone style) -->
1452                        <div class="absolute top-0 left-1/2 transform -translate-x-1/2 w-32 h-6 bg-black rounded-b-xl z-40" aria-hidden="true"></div>
1453
1454                        <!-- Vídeo Container -->
1455                        <div class="w-full h-full relative">
1456                            <video 
1457                                class="w-full h-full object-cover" 
1458                                autoplay 
1459                                muted 
1460                                loop 
1461                                playsinline
1462                                poster="assets/images/telas-jmv-news/tela-inicial.jpg"
1463                                aria-label="Vídeo demonstrativo do catálogo musical tipo Spotify no aplicativo Cross Media JMV News"
1464                                role="img"
1465                                width="280"
1466                                height="560"
1467                            >
1468                                <source src="assets/images/videos/video-spotify-da-radio-catalogo-musicas-audio-on-demand-app-jmv-news-streaming-digital.mp4" type="video/mp4">
1469                                <!-- Fallback para imagem caso o vídeo não carregue -->
1470                                <img src="assets/images/telas-jmv-news/tela-inicial.jpg" 
1471                                     alt="Tela inicial do aplicativo Cross Media JMV News mostrando catálogo musical" 
1472                                     class="w-full h-full object-cover"
1473                                     loading="lazy"
1474                                     width="280"
1475                                     height="560" />
1476                            </video>
1477                        </div>
1478
1479                        <!-- Home indicator (iPhone style) -->
1480                        <div class="absolute bottom-2 left-1/2 transform -translate-x-1/2 w-32 h-1 bg-white rounded-full opacity-30 z-40" aria-hidden="true"></div>
1481                    </div>
1482
1483                    <!-- Side buttons -->
1484                    <div class="absolute -left-[6px] top-20 w-[6px] h-8 bg-gray-500 rounded-l-sm" aria-hidden="true"></div>
1485                    <div class="absolute -left-[6px] top-32 w-[6px] h-12 bg-gray-500 rounded-l-sm" aria-hidden="true"></div>
1486                    <div class="absolute -left-[6px] top-48 w-[6px] h-12 bg-gray-500 rounded-l-sm" aria-hidden="true"></div>
1487                    <div class="absolute -right-[6px] top-28 w-[6px] h-16 bg-gray-500 rounded-r-sm" aria-hidden="true"></div>
1488                </div>
1489
1490
1491                <!-- Reflection effect -->
1492                <div class="absolute inset-0 bg-gradient-to-tr from-transparent via-white/5 to-white/20 rounded-[3rem] pointer-events-none z-25" aria-hidden="true"></div>
1493            </div>
1494        </div>
1495    </div>
1496</section>
1497
1498<!-- Estilos para efeitos de iluminação -->
1499<style>
1500    /* Efeito de iluminação acima do celular */
1501    .altar-light-top {
1502        position: absolute;
1503        top: -60px;
1504        left: 50%;
1505        transform: translateX(-50%);
1506        width: 300px;
1507        height: 80px;
1508        background: radial-gradient(ellipse at center, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.1) 70%, rgba(255,255,255,0) 100%);
1509        filter: blur(10px);
1510        z-index: 5;
1511        pointer-events: none;
1512    }
1513
1514    /* Efeito de iluminação no chão abaixo do celular */
1515    .altar-light-bottom {
1516        position: absolute;
1517        bottom: -60px;
1518        left: 50%;
1519        transform: translateX(-50%);
1520        width: 320px;
1521        height: 100px;
1522        background: radial-gradient(ellipse at center, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.05) 70%, rgba(255,255,255,0) 100%);
1523        filter: blur(18px);
1524        z-index: 5;
1525        pointer-events: none;
1526    }
1527
1528    /* Responsividade para mobile */
1529    @media (max-width: 768px) {
1530        .altar-light-top {
1531            width: 250px;
1532            height: 60px;
1533        }
1534        
1535        .altar-light-bottom {
1536            width: 270px;
1537            height: 80px;
1538        }
1539    }
1540</style><section class="relative bg-black py-24 px-4 overflow-hidden" aria-labelledby="sorteios-title">
1541    <!-- Background image with 20% opacity -->
1542    <div class="absolute inset-0" role="img" aria-label="Fundo abstrato com ondas vibrantes representando engajamento">
1543        <img src="assets/images/fundo-background-sorteios-com-apenas-dois-cliques-radio-audio-on-demand-catalogo-musical-jmv-news-jmv-technology-abstrato-ondas-vibrantes.webp"
1544             alt="Fundo abstrato com ondas vibrantes representando sorteios e engajamento de ouvintes"
1545             class="w-full h-full object-cover opacity-20"
1546             loading="lazy"
1547             width="1920"
1548             height="1080">
1549    </div>
1550
1551    <!-- Glow decor -->
1552    <div class="pointer-events-none absolute inset-0" aria-hidden="true">
1553        <div class="absolute -top-32 -left-32 w-96 h-96 bg-rose-600/10 rounded-full blur-3xl"></div>
1554        <div class="absolute -bottom-32 -right-32 w-[30rem] h-[30rem] bg-rose-500/10 rounded-full blur-3xl"></div>
1555    </div>
1556
1557    <div class="relative max-w-6xl mx-auto flex flex-col lg:flex-row items-center gap-16">
1558        <!-- Mockup -->
1559        <div class="w-full lg:w-5/12 flex justify-center order-1 lg:order-none" role="img" aria-label="Demonstração dos sorteios automatizados no aplicativo">
1560            <div class="relative">
1561                <div class="relative w-[280px] md:w-[300px] h-[560px] md:h-[600px] bg-black rounded-[3rem] border-[3px] border-gray-700 shadow-2xl p-1" role="presentation">
1562                    <div class="w-full h-full bg-white rounded-[2.3rem] overflow-hidden relative">
1563                        <div class="absolute top-0 left-1/2 -translate-x-1/2 w-32 h-6 bg-black rounded-b-xl z-10" aria-hidden="true"></div>
1564                        <!-- Video -->
1565                        <video
1566                            class="w-full h-full object-cover"
1567                            src="assets/images/videos/video-sorteios-automatizados-2-cliques-app-radio-engajamento-fidelizacao-jmv-news-jmv-technology.mp4"
1568                            autoplay
1569                            loop
1570                            muted
1571                            playsinline
1572                            preload="metadata"
1573                            aria-label="Vídeo demonstrativo dos sorteios automatizados funcionando em apenas 2 cliques"
1574                            role="img"
1575                            width="280"
1576                            height="560">
1577                            Seu navegador não suporta vídeo em HTML5.
1578                        </video>
1579                        <div class="absolute bottom-2 left-1/2 -translate-x-1/2 w-32 h-1 bg-black rounded-full opacity-30 z-10" aria-hidden="true"></div>
1580                    </div>
1581                    <!-- Buttons (laterais) -->
1582                    <div class="absolute -left-[6px] top-20 w-[6px] h-8 bg-gray-500 rounded-l-sm" aria-hidden="true"></div>
1583                    <div class="absolute -left-[6px] top-32 w-[6px] h-12 bg-gray-500 rounded-l-sm" aria-hidden="true"></div>
1584                    <div class="absolute -left-[6px] top-48 w-[6px] h-12 bg-gray-500 rounded-l-sm" aria-hidden="true"></div>
1585                    <div class="absolute -right-[6px] top-28 w-[6px] h-16 bg-gray-500 rounded-r-sm" aria-hidden="true"></div>
1586
1587                    <!-- Indicador "2 Cliques" (mais próximo, sem linha) -->
1588                    <div class="double-click-indicator flex absolute top-[7.6rem] -right-[90px] md:-right-[105px] flex-col items-center gap-2 pointer-events-none select-none" 
1589                         style="animation: horizontal-bounce 2s infinite;"
1590                         aria-label="Indicador visual de apenas 2 cliques necessários"
1591                         role="img">
1592                    <style>
1593                    @keyframes horizontal-bounce {
1594                        0% { transform: translateX(-10px); }
1595                        50% { transform: translateX(10px); }
1596                        100% { transform: translateX(-10px); }
1597                    }
1598                    </style>
1599                        <div class="relative flex flex-col items-center">
1600                            <div class="relative hand-rotated -rotate-90">
1601                                <i class="fas fa-hand-pointer text-rose-500 text-4xl animate-double-click drop-shadow-[0_0_6px_rgba(244,63,94,0.55)]" aria-hidden="true"></i>
1602                                <!-- Anéis -->
1603                                <span class="absolute inset-0 flex items-center justify-center pointer-events-none" aria-hidden="true">
1604                                    <span class="click-ring w-10 h-10"></span>
1605                                    <span class="click-ring w-10 h-10 animation-delay-150"></span>
1606                                </span>
1607                               >
1608                            </div>
1609                        </div>
1610                        <span class="text-[11px] leading-tight uppercase tracking-wider text-gray-200 font-medium text-center">
1611                            2 cliques
1612                        </span>
1613                    </div>
1614
1615                    <div class="absolute inset-0 bg-gradient-to-tr from-transparent via-white/5 to-white/10 rounded-[3rem] pointer-events-none" aria-hidden="true"></div>
1616                </div>
1617            </div>
1618        </div>
1619
1620        <!-- Texto com overlay -->
1621        <article class="w-full lg:w-7/12 relative z-10">
1622            <div class="relative group bg-gradient-to-br from-black/80 via-black/70 to-black/60 backdrop-blur-sm rounded-2xl p-8 md:p-10 border border-white/10 shadow-xl shadow-black/40
1623                        transition-all duration-500 ease-out
1624                        hover:from-black/85 hover:via-black/75 hover:to-black/70
1625                        hover:shadow-2xl hover:shadow-rose-600/20 hover:-translate-y-1 hover:border-rose-500/20 hover-reflect">
1626                <div class="absolute inset-0 rounded-2xl ring-1 ring-white/5 pointer-events-none transition-colors duration-500 group-hover:ring-rose-500/20" aria-hidden="true"></div>
1627                <div class="pointer-events-none absolute -inset-px rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-700" aria-hidden="true">
1628                    <div class="absolute inset-0 rounded-2xl bg-gradient-to-tr from-rose-500/5 via-transparent to-rose-400/10 blur-sm"></div>
1629                </div>
1630
1631                <h2 id="sorteios-title" class="text-3xl md:text-4xl font-bold mb-6 leading-tight text-white">
1632                    Sorteios em <span class="text-rose-500">2 Cliques</span>
1633                </h2>
1634
1635                <p class="text-gray-300 mb-5 font-medium">
1636                    Engaje sua audiência sem depender de redes sociais ou expor a privacidade dos ouvintes.
1637                </p>
1638
1639                <p class="text-gray-400 mb-5">
1640                    Transforme seu aplicativo em uma poderosa ferramenta de <span class="text-yellow-400 font-semibold">engajamento</span>.
1641                </p>
1642
1643                <ul class="space-y-4 mb-8" role="list" aria-label="Benefícios dos sorteios automatizados">
1644                    <li class="flex items-start gap-3" role="listitem">
1645                        <div class="mt-1 text-rose-500" aria-hidden="true"><i class="fas fa-bolt"></i></div>
1646                        <p class="text-gray-300">Participação em <strong class="font-semibold text-white">2 cliques</strong> usando conta Google ou Apple — sem formulários cansativos.</p>
1647                    </li>
1648                    <li class="flex items-start gap-3" role="listitem">
1649                        <div class="mt-1 text-rose-500" aria-hidden="true"><i class="fas fa-sliders-h"></i></div>
1650                        <p class="text-gray-300">Total <span class="text-yellow-400 font-semibold">autonomia</span>: defina regras, prêmios e duração dos sorteios.</p>
1651                    </li>
1652                    <li class="flex items-start gap-3" role="listitem">
1653                        <div class="mt-1 text-rose-500" aria-hidden="true"><i class="fas fa-chart-line"></i></div>
1654                        <p class="text-gray-300">Acompanhe resultados em tempo real e aumente a <strong class="font-semibold text-white">fidelização</strong>.</p>
1655                    </li>
1656                    <li class="flex items-start gap-3" role="listitem">
1657                        <div class="mt-1 text-rose-500" aria-hidden="true"><i class="fas fa-shield-alt"></i></div>
1658                        <p class="text-gray-300">Processo <span class="text-yellow-400 font-semibold">transparente</span>, <span class="text-yellow-400 font-semibold">auditável</span> e integrado ao seu app.</p>
1659                    </li>
1660                </ul>
1661
1662                <p class="text-gray-400 mb-8 italic">
1663                    Simples, transparente e feito para criar <span class="text-yellow-400 font-semibold">experiências</span> que retêm ouvintes.
1664                </p>
1665
1666                <div>
1667                    <a href="#contato-jmv-news-ecossistema-crossmedia"
1668                       class="inline-flex items-center gap-2 bg-rose-600 hover:bg-rose-700 active:bg-rose-800 text-white font-semibold px-7 py-3 rounded-full text-sm md:text-base transition-colors shadow-lg shadow-rose-600/20 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 focus:ring-offset-black hover-reflect"
1669                       aria-label="Entrar em contato com especialista sobre sorteios automatizados"
1670                       title="Falar com especialista sobre implementação de sorteios">
1671                        <i class="fas fa-comments" aria-hidden="true"></i>
1672                        Falar com um Especialista
1673                    </a>
1674                </div>
1675            </div>
1676        </article>
1677    </div>
1678</section>
1679
1680<style>
1681@keyframes double-click-pulse {
1682    0%,34%,100% { transform: scale(1); }
1683    5% { transform: scale(0.9); }
1684    10% { transform: scale(1.15); }
1685    15% { transform: scale(1); }
1686    20% { transform: scale(0.9); }
1687    25% { transform: scale(1.15); }
1688    30% { transform: scale(1); }
1689}
1690@keyframes click-ring {
1691    0% { transform: scale(.4); opacity:.8; }
1692    60% { opacity:0; }
1693    70%,100% { transform: scale(1.6); opacity:0; }
1694}
1695.animate-double-click { animation: double-click-pulse 4s ease-in-out infinite; transform-origin: center; }
1696.click-ring {
1697    position:absolute;
1698    border:2px solid rgba(244,63,94,0.45);
1699    border-radius:9999px;
1700    animation: click-ring 4s ease-out infinite;
1701}
1702.animation-delay-150 { animation-delay:.15s; }
1703
1704/* Conector apontando para o botão lateral */
1705.double-click-indicator .connector {
1706    position:absolute;
1707    left:-115px; /* alcança o botão lateral */
1708    top:50%;
1709    transform:translateY(-50%);
1710    width:110px;
1711    height:2px;
1712    background:linear-gradient(to left, rgba(244,63,94,0.9), rgba(244,63,94,0) 70%);
1713    animation: connector-pulse 2.4s ease-in-out infinite;
1714}
1715.double-click-indicator .connector:before {
1716    content:"";
1717    position:absolute;
1718    left:0;
1719    top:50%;
1720    transform:translateY(-50%);
1721    width:10px;
1722    height:10px;
1723    background:rgba(244,63,94,0.95);
1724    border-radius:50%;
1725    box-shadow:0 0 8px 2px rgba(244,63,94,0.6);
1726}
1727.double-click-indicator .connector:after {
1728    content:"";
1729    position:absolute;
1730    right:4px;
1731    top:50%;
1732    transform:translateY(-50%) rotate(180deg);
1733    border:6px solid transparent;
1734    border-left-color:rgba(244,63,94,0.95);
1735    filter:drop-shadow(0 0 4px rgba(244,63,94,0.6));
1736}
1737@keyframes connector-pulse {
1738    0%,100% { opacity:.55; }
1739    50% { opacity:1; }
1740}
1741</style><section class="py-16" aria-labelledby="pedidos-musica-title">
1742  <div class="container mx-auto px-4 lg:px-8">
1743    <div class="grid items-center gap-10 lg:grid-cols-2">
1744      <!-- Texto -->
1745      <article>
1746        <h2 id="pedidos-musica-title" class="text-3xl md:text-4xl font-bold text-neutral-900">
1747          Pedidos de Música
1748        </h2>
1749
1750        <div class="mt-6 rounded-xl bg-white p-6 md:p-8 shadow-lg">
1751          <p class="font-semibold text-neutral-800">
1752            Dê voz ao seu ouvinte e torne sua programação ainda mais interativa.
1753          </p>
1754          <p class="mt-4 text-neutral-700 leading-relaxed">
1755            Com os pedidos de música direto no app, sua rádio cria
1756            <strong class="font-semibold">proximidade</strong> com o público, aumenta a participação ao vivo e
1757            reforça a <strong class="font-semibold">fidelização</strong> da audiência — tudo de forma simples e
1758            integrada.
1759          </p>
1760
1761          <ul class="mt-6 space-y-3" role="list" aria-label="Benefícios dos pedidos de música">
1762            <li class="flex gap-3" role="listitem">
1763              <i class="fas fa-check-circle text-red-600 mt-1 flex-none" aria-hidden="true"></i>
1764              <span class="text-neutral-700">Formulário simples e direto — sem burocracia para o ouvinte participar.</span>
1765            </li>
1766            <li class="flex gap-3" role="listitem">
1767              <i class="fas fa-check-circle text-red-600 mt-1 flex-none" aria-hidden="true"></i>
1768              <span class="text-neutral-700">Mais engajamento ao vivo — interatividade real durante a programação.</span>
1769            </li>
1770            <li class="flex gap-3" role="listitem">
1771              <i class="fas fa-check-circle text-red-600 mt-1 flex-none" aria-hidden="true"></i>
1772              <span class="text-neutral-700">Ouvintes fiéis — quem participa mais, se conecta mais com a rádio.</span>
1773            </li>
1774          </ul>
1775
1776          <div class="mt-8">
1777            <a href="#contato-jmv-news-ecossistema-crossmedia"
1778               class="inline-flex items-center justify-center rounded-full bg-red-600 px-6 py-3 text-white font-semibold shadow-sm hover:bg-red-700 transition focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 hover-reflect"
1779               aria-label="Entrar em contato sobre pedidos de música"
1780               title="Falar sobre implementação de pedidos de música">
1781              <i class="fas fa-comments mr-3" aria-hidden="true"></i>
1782              Entre em Contato
1783            </a>
1784          </div>
1785        </div>
1786      </article>
1787
1788      <!-- Imagem -->
1789      <div class="relative" role="img" aria-label="Ouvinte usando fones de ouvido com aplicativo JMV News">
1790        <div class="aspect-[4/5] md:aspect-[4/3] w-full rounded-2xl border-2 border-neutral-300 bg-neutral-100 flex items-center justify-center hover-reflect">
1791          <img src="assets/images/ouvinte-com-fones-usando-app-jmv-news-pedidos-de-musica-streaming-radio-digital-jmv-technology.webp"
1792               alt="Ouvinte usando fones de ouvido enquanto utiliza o aplicativo JMV News para fazer pedidos de música"
1793               class="w-full h-full object-cover rounded-2xl shadow-2xl shadow-black/40"
1794               loading="lazy"
1795               width="400"
1796               height="300" />
1797        </div>
1798      </div>
1799    </div>
1800  </div>
1801</section>
1802<section class="py-16 md:py-20 bg-black" aria-labelledby="personalizacao-title" id="demo">
1803    <div class="max-w-6xl mx-auto px-4">
1804        <div class="grid lg:grid-cols-2 items-center gap-12">
1805            <!-- Mockup do Smartphone -->
1806            <div class="flex justify-center lg:justify-start" role="img" aria-label="Demonstração interativa do aplicativo JMV News">
1807                <div class="relative">
1808                    <!-- Smartphone Frame -->
1809                    <div class="relative w-[300px] h-[600px] bg-gray-900 rounded-[3rem] border-[3px] border-gray-700 shadow-2xl p-1" role="presentation">
1810                        <!-- Screen -->
1811                        <div class="w-full h-full bg-black rounded-[2.3rem] overflow-y-auto relative">
1812                            <!-- App Content Container -->
1813                            <div id="app-content" class="w-full h-full" role="application" aria-label="Simulador do aplicativo">
1814                                <!-- Página Inicial (padrão) -->
1815                                <div id="page-inicio" class="app-page active" role="tabpanel" aria-labelledby="nav-inicio">
1816                                    <!-- Status Bar -->
1817<div class="px-4 py-1 flex justify-between items-center text-white text-xs" style="background-color: #7D1B1A;">
1818    <span>10:21</span>
1819    <div class="flex items-center gap-1">
1820        <i class="fas fa-signal text-xs"></i>
1821        <i class="fas fa-wifi text-xs"></i>
1822        <i class="fas fa-battery-three-quarters text-xs"></i>
1823    </div>
1824</div>
1825
1826<!-- Header -->
1827<div class="px-4 py-3 flex items-center" style="background-color: #7D1B1A;">
1828    <div class="flex-1 flex justify-center">
1829        <img src="assets/images/logo-jmv-news-logomarca-oficial-app-para-radios-tv-streaming-jmv-technology.webp" 
1830             alt="JMV News Logo" 
1831             class="h-4 object-contain">
1832    </div>
1833    <div class="w-4 h-4 bg-white rounded-full flex items-center justify-center">
1834        <i class="fas fa-user text-black text-[8px]"></i>
1835    </div>
1836</div>
1837
1838<!-- Main Image/News Banner Slider -->
1839<div class="px-4 py-3">
1840    <div class="relative h-24 rounded-lg overflow-hidden">
1841        <!-- Swiper Container -->
1842        <div class="swiper bannerSwiper w-full h-full">
1843            <div class="swiper-wrapper">
1844                <div class="swiper-slide">
1845                    <img src="assets/images/imagens-app-personalizacao/banner-exemplo-site-app-para-radios-jmv-news-jmv-technology-modelo-visual.webp" 
1846                         alt="Banner Exemplo 1" 
1847                         class="w-full h-full object-cover">
1848                </div>
1849                <div class="swiper-slide">
1850                    <img src="assets/images/imagens-app-personalizacao/banner-exemplo-site-app-para-radios-jmv-news-jmv-technology-modelo-visual2.webp" 
1851                         alt="Banner Exemplo 2" 
1852                         class="w-full h-full object-cover">
1853                </div>
1854                <div class="swiper-slide">
1855                    <img src="assets/images/imagens-app-personalizacao/banner-exemplo-site-app-para-radios-jmv-news-jmv-technology-modelo-visual3.webp" 
1856                         alt="Banner Exemplo 3" 
1857                         class="w-full h-full object-cover">
1858                </div>
1859            </div>
1860            <!-- Pagination -->
1861            <div class="swiper-pagination-banner"></div>
1862        </div>
1863    </div>
1864</div>
1865
1866<!-- Navigation Buttons -->
1867<div class="px-4 pb-3">
1868    <div class="grid grid-cols-4 gap-2">
1869        <button data-nav="contato" class="text-white py-2 px-1 rounded flex flex-col items-center justify-center text-[7px] transition-opacity duration-200 hover:opacity-70" style="background-color: #7D1B1A;">
1870            <i class="fas fa-phone mb-1 text-[11px]"></i>
1871            <span>Contato</span>
1872        </button>
1873        <button data-nav="videos" class="text-white py-2 px-1 rounded flex flex-col items-center justify-center text-[7px] transition-opacity duration-200 hover:opacity-70" style="background-color: #7D1B1A;">
1874            <i class="fas fa-play mb-1 text-[11px]"></i>
1875            <span>Ao vivo</span>
1876        </button>
1877        <button data-nav="programacao" class="text-white py-2 px-1 rounded flex flex-col items-center justify-center text-[7px] transition-opacity duration-200 hover:opacity-70" style="background-color: #7D1B1A;">
1878            <i class="fas fa-calendar mb-1 text-[11px]"></i>
1879            <span>Programação</span>
1880        </button>
1881        <button data-nav="top10" class="text-white py-2 px-1 rounded flex flex-col items-center justify-center text-[7px] transition-opacity duration-200 hover:opacity-70" style="background-color: #7D1B1A;">
1882            <i class="fas fa-chart-line mb-1 text-[11px]"></i>
1883            <span>Top 10</span>
1884        </button>
1885    </div>
1886</div>
1887
1888<!-- News Cards -->
1889<div class="px-4 space-y-3 flex-1 overflow-y-auto pb-20">
1890    <!-- News Card 1 -->
1891    <div class="rounded-lg p-3 flex items-center gap-3 transition-opacity duration-200 hover:opacity-70 cursor-pointer" style="background-color: #7D1B1A;">
1892        <div class="w-12 h-12 flex-shrink-0 flex items-center justify-center">
1893            <img src="assets/images/imagens-app-personalizacao/jmvnewsnome-de-jogadores-cruzeiro-2025-elenco-reforcos-novas-contratacoes-futebol-brasileiro.webp" 
1894                alt="Jogadores Cruzeiro 2025" 
1895                class="w-10 h-10 object-cover" />
1896        </div>
1897        <div class="flex-1">
1898            <p class="text-white text-[9px] font-medium">Ataque do Cruzeiro é o setor com mais contratações para 2025, c
1898onfira os detalhes</p>
1899        </div>
1900        <i class="fas fa-chevron-right text-white text-xs"></i>
1901    </div>
1902
1903    <!-- News Card 2 -->
1904    <div class="rounded-lg p-3 flex items-center gap-3 transition-opacity duration-200 hover:opacity-70 cursor-pointer" style="background-color: #7D1B1A;">
1905        <div class="w-12 h-12 flex-shrink-0 flex items-center justify-center">
1906            <img src="assets/images/imagens-app-personalizacao/the-rock-emocionado-festival-cinema-ovacionado-publico-aplauso-evento-internacional.webp" 
1907                alt="The Rock emocionado festival cinema" 
1908                class="w-10 h-10 object-cover" />
1909        </div>
1910        <div class="flex-1">
1911            <p class="text-white text-[9px] font-medium">The Rock se emociona após aplaudido lançamento de filme que o fez emagrecer 30 kg em Veneza</p>
1912        </div>
1913        <i class="fas fa-chevron-right text-white text-xs"></i>
1914    </div>
1915
1916    <!-- News Card 3 -->
1917    <div class="rounded-lg p-3 flex items-center gap-3 transition-opacity duration-200 hover:opacity-70 cursor-pointer" style="background-color: #7D1B1A;">
1918        <div class="w-12 h-12 flex-shrink-0 flex items-center justify-center">
1919            <img src="assets/images/imagens-app-personalizacao/torcida-festa-galo-atletico-mg-classico-vitoria-comemoracao-torcedores-rua-futebol-mineiro.webp" 
1920                alt="Torcida festa Galo Atlético MG" 
1921                class="w-10 h-10 object-cover" />
1922        </div>
1923        <div class="flex-1">
1924            <p class="text-white text-[9px] font-medium">Despedida do Bar do Salomão: Data e Programação da Grande Festa</p>
1925        </div>
1926        <i class="fas fa-chevron-right text-white text-xs"></i>
1927    </div>
1928</div>
1929
1930<!-- Bottom Navigation -->
1931<div class="absolute bottom-0 left-0 right-0 px-4 py-2" style="background-color: #7D1B1A;">
1932    <div class="flex justify-around items-center">
1933        <button data-nav="home" class="text-white flex flex-col items-center">
1934            <i class="fas fa-home text-sm mb-1"></i>
1935        </button>
1936            <button data-nav="pedido" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70">
1937            <i class="fas fa-radio text-sm mb-1"></i>
1938        </button>
1939        <button data-nav="sorteios" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70">
1940            <i class="fas fa-gift text-sm mb-1"></i>
1941        </button>
1942        <button data-nav="spotify" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70">
1943            <i class="fas fa-music text-sm mb-1"></i>
1944        </button>
1945        <button data-nav="videos" class="text-white flex flex-col items-center">
1946            <i class="fas fa-play text-sm mb-1"></i>
1947        </button>
1948    </div>
1949    <!-- Home Indicator -->
1950    <div class="flex justify-center mt-2">
1951        <div class="w-32 h-1 bg-white/30 rounded-full"></div>
1952    </div>
1953</div>
1954
1955                                </div>
1956                                
1957                                <!-- Página Contato (oculta inicialmente) -->
1958                                <div id="page-contato" class="app-page hidden" role="tabpanel" aria-labelledby="nav-contato">
1959                                    <!-- Status Bar -->
1960<div class="px-4 py-1 flex justify-between items-center text-white text-xs" style="background-color: #7D1B1A;">
1961    <span>10:21</span>
1962    <div class="flex items-center gap-1">
1963        <i class="fas fa-signal text-xs"></i>
1964        <i class="fas fa-wifi text-xs"></i>
1965        <i class="fas fa-battery-three-quarters text-xs"></i>
1966    </div>
1967</div>
1968
1969<!-- Header -->
1970<div class="px-4 py-3 flex items-center" style="background-color: #7D1B1A;">
1971    <button class="back-button mr-3" data-nav="home">
1972        <i class="fas fa-chevron-left text-white text-sm"></i>
1973    </button>
1974    <span class="text-white text-sm mr-4">Home</span>
1975    <div class="flex-1 text-center">
1976        <h1 class="text-white text-lg font-semibold">Contatos</h1>
1977    </div>
1978</div>
1979
1980<!-- Content Area -->
1981<div class="bg-black flex-1 px-4 pt-24 flex items-center justify-center">
1982    <!-- Contact Buttons -->
1983    <div class="space-y-3 w-full max-w-xs">
1984        <!-- Email -->
1985        <button class="w-full rounded-lg p-3 flex items-center gap-3" style="background-color: #7D1B1A;">
1986            <div class="w-6 h-6 border-2 border-white rounded-full flex items-center justify-center">
1987                <i class="fas fa-envelope text-white" style="font-size: 12px;"></i>
1988            </div>
1989            <span class="text-white text-sm font-medium">Email</span>
1990        </button>
1991
1992        <!-- WhatsApp -->
1993        <button class="w-full rounded-lg p-3 flex items-center gap-3" style="background-color: #7D1B1A;">
1994            <div class="w-6 h-6 border-2 border-white rounded-full flex items-center justify-center">
1995                <i class="fab fa-whatsapp text-white" style="font-size: 12px;"></i>
1996            </div>
1997            <span class="text-white text-sm font-medium">Whatsapp</span>
1998        </button>
1999
2000        <!-- Facebook -->
2001        <button class="w-full rounded-lg p-3 flex items-center gap-3" style="background-color: #7D1B1A;">
2002            <div class="w-6 h-6 border-2 border-white rounded-full flex items-center justify-center">
2003                <i class="fab fa-facebook-f text-white" style="font-size: 12px;"></i>
2004            </div>
2005            <span class="text-white text-sm font-medium">Facebook</span>
2006        </button>
2007
2008        <!-- Instagram -->
2009        <button class="w-full rounded-lg p-3 flex items-center gap-3" style="background-color: #7D1B1A;">
2010            <div class="w-6 h-6 border-2 border-white rounded-full flex items-center justify-center">
2011                <i class="fab fa-instagram text-white" style="font-size: 12px;"></i>
2012            </div>
2013            <span class="text-white text-sm font-medium">Instagram</span>
2014        </button>
2015
2016        <!-- Twitter -->
2017        <button class="w-full rounded-lg p-3 flex items-center gap-3" style="background-color: #7D1B1A;">
2018            <div class="w-6 h-6 border-2 border-white rounded-full flex items-center justify-center">
2019                <i class="fab fa-twitter text-white" style="font-size: 12px;"></i>
2020            </div>
2021            <span class="text-white text-sm font-medium">Twitter</span>
2022        </button>
2023    </div>
2024</div>
2025
2026<!-- Bottom Navigation -->
2027<div class="absolute bottom-0 left-0 right-0 px-4 py-2" style="background-color: #7D1B1A;">
2028    <div class="flex justify-around items-center">
2029        <button data-nav="home" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70">
2030            <i class="fas fa-home text-sm mb-1"></i>
2031        </button>
2032        <button data-nav="pedido" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70">
2033            <i class="fas fa-radio text-sm mb-1"></i>
2034        </button>
2035        <button data-nav="sorteios" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70">
2036            <i class="fas fa-gift text-sm mb-1"></i>
2037        </button>
2038        <button data-nav="spotify" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70">
2039            <i class="fas fa-music text-sm mb-1"></i>
2040        </button>
2041        <button data-nav="videos" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70">
2042            <i class="fas fa-play text-sm mb-1"></i>
2043        </button>
2044    </div>
2045    <!-- Home Indicator -->
2046    <div class="flex justify-center mt-2">
2047        <div class="w-32 h-1 bg-white/30 rounded-full"></div>
2048    </div>
2049</div>
2050                                </div>
2051                                
2052                                <!-- Página Vídeos (oculta inicialmente) -->
2053                                <div id="page-videos" class="app-page hidden" role="tabpanel" aria-labelledby="nav-videos">
2054                                    <!-- Status Bar -->
2055<div class="px-4 py-1 flex justify-between items-center text-white text-xs" style="background-color: #7D1B1A;">
2056    <span>10:21</span>
2057    <div class="flex items-center gap-1">
2058        <i class="fas fa-signal text-xs"></i>
2059        <i class="fas fa-wifi text-xs"></i>
2060        <div class="flex items-center gap-1">
2061            <i class="fas fa-battery-three-quarters text-xs"></i>
2062            <span class="text-[10px]">87</span>
2063        </div>
2064    </div>
2065</div>
2066
2067<!-- Header -->
2068<div class="px-4 py-3 flex items-center" style="background-color: #7D1B1A;">
2069    <div class="flex-1 flex justify-center">
2070        <img src="assets/images/logo-jmv-news-logomarca-oficial-app-para-radios-tv-streaming-jmv-technology.webp" 
2071             alt="JMV News Logo" 
2072             class="h-4 object-contain">
2073    </div>
2074    <div class="w-4 h-4 bg-white rounded-full flex items-center justify-center">
2075        <i class="fas fa-user text-black text-[8px]"></i>
2076    </div>
2077</div>
2078
2079<!-- Live Button and Title Row -->
2080<div class="px-4 py-2">
2081    <div class="flex justify-between items-center">
2082        <div class="bg-red-600 text-white px-2 py-1 rounded-full flex items-center gap-1">
2083            <div class="w-1.5 h-1.5 bg-white rounded-full"></div>
2084            <span class="text-[8px] font-medium">AO VIVO</span>
2085        </div>
2086        <h1 class="text-white text-sm font-bold">JMV NEWS</h1>
2087    </div>
2088</div>
2089
2090<!-- Video Player Area -->
2091<div class="px-4 py-3">
2092    <div class="relative h-40 rounded-lg overflow-hidden" style="background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);">
2093        
2094        
2095        <!-- Conteúdo do vídeo - Player JMV Stream -->
2096        <div class="w-full h-full flex items-center justify-center">
2097            <div id="video-player-container" class="w-full h-full relative">
2098                <!-- PLAYER DE VÍDEO LOCAL -->
2099                <!-- Vídeo de fundo/hero sem controles -->
2100<video
2101  id="heroVideo"
2102  width="100%"
2103  height="100%"
2104  autoplay
2105  muted
2106  loop
2107  playsinline
2108  preload="metadata"
2109  poster="https://cdn.vod.br1.jmvstream.com/vod/vod_323/files/5wuzr35ph8nm2cc/cover/cover1.jpg?uf085lum5fbz=hr9yd7dh87le"
2110  style="position:absolute; height:100%; width:100%; object-fit:cover;">
2111  <!-- sem <source>; o JS abaixo injeta o .m3u8 -->
2112  Seu navegador não suporta vídeo.
2113</video>
2114
2115<!-- Hls.js (CDN) -->
2116<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
vendor: 2 bytes, line 2116
2116
2117<script>
2118  const m3u8 = "https://cdn.vod.br1.jmvstream.com/vod/vod_323/f/5wuzr35ph8nm2cc/h/4/playlist.m3u8?uf085lum5fbz=hr9yd7dh87le";
2119  const video = document.getElementById("heroVideo");
2120
2121  // Safari (iOS/macOS) toca HLS nativo
2122  if (video.canPlayType("application/vnd.apple.mpegurl")) {
2123    video.src = m3u8;
2124  } else if (window.Hls && Hls.isSupported()) {
2125    const hls = new Hls({
2126      // ajustes opcionais
2127      maxBufferLength: 30,
2128      maxMaxBufferLength: 60,
2129    });
2130    hls.loadSource(m3u8);
2131    hls.attachMedia(video);
2132  } else {
2133    console.warn("HLS não suportado neste navegador.");
2134  }
2135
2136  // tentativa de iniciar assim que possível (alguns navegadores exigem interação)
2137  video.addEventListener('canplay', () => video.play().catch(()=>{}));
2138</script>
2138
2139
2140            </div>
2141        </div>
2142        
2143        
2144    </div>
2145</div>
2146
2147<!-- Galeria de Vídeos -->
2148<div class="px-4 py-3">
2149    <div class="bg-white rounded-lg p-4">
2150        <div class="flex items-center gap-3">
2151            <div class="w-6 h-6 bg-red-600 rounded flex items-center justify-center">
2152                <i class="fas fa-play text-white text-xs"></i>
2153            </div>
2154            <div>
2155                <h3 class="text-gray-800 font-bold text-xs">Galeria de Vídeos</h3>
2156                <p class="text-gray-500 text-[10px]">Conteúdo Exclusivo JMV</p>
2157            </div>
2158        </div>
2159    </div>
2160</div>
2161
2162<!-- Area de vídeos -->
2163<div class="px-4 flex-1 pb-20">
2164  <div class="flex gap-3 py-4">
2165    <!-- Vídeo 1 -->
2166    <div class="flex-1 bg-gray-800 rounded-lg overflow-hidden">
2167      <div class="aspect-video bg-gray-700 flex items-center justify-center relative video-container">
2168        <video 
2169          id="video1"
2170          width="100%" 
2171          height="100%" 
2172          preload="metadata"
2173          playsinline
2174          muted
2175          style="position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;">
2176          Seu navegador não suporta vídeo.
2177        </video>
2178        <!-- Play Button Overlay -->
2179        <div id="playBtn1" class="absolute inset-0 flex items-center justify-center z-10 cursor-pointer bg-black/10">
2180          <div class="w-10 h-10 bg-red-600/80 rounded-full flex items-center justify-center hover:bg-red-700/90 transition-colors shadow-lg">
2181            <i class="fas fa-play text-white text-sm ml-0.5"></i>
2182          </div>
2183        </div>
2184        <!-- Pause Button Overlay -->
2185        <div id="pauseBtn1" class="absolute inset-0 flex items-center justify-center z-10 cursor-pointer bg-black/10 opacity-0 hover:opacity-100 transition-opacity duration-300" style="display:none;">
2186          <div class="w-10 h-10 bg-red-600/80 rounded-full flex items-center justify-center hover:bg-red-700/90 transition-colors shadow-lg">
2187            <i class="fas fa-pause text-white text-sm"></i>
2188          </div>
2189        </div>
2190      </div>
2191    </div>
2192
2193    <!-- Vídeo 2 -->
2194    <div class="flex-1 bg-gray-800 rounded-lg overflow-hidden">
2195      <div class="aspect-video bg-gray-700 flex items-center justify-center relative video-container">
2196        <video 
2197          id="video2"
2198          width="100%" 
2199          height="100%" 
2200          preload="metadata"
2201          playsinline
2202          muted
2203          style="position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;">
2204          Seu navegador não suporta vídeo.
2205        </video>
2206        <!-- Play Button Overlay -->
2207        <div id="playBtn2" class="absolute inset-0 flex items-center justify-center z-10 cursor-pointer bg-black/10">
2208          <div class="w-10 h-10 bg-red-600/80 rounded-full flex items-center justify-center hover:bg-red-700/90 transition-colors shadow-lg">
2209            <i class="fas fa-play text-white text-sm ml-0.5"></i>
2210          </div>
2211        </div>
2212        <!-- Pause Button Overlay -->
2213        <div id="pauseBtn2" class="absolute inset-0 flex items-center justify-center z-10 cursor-pointer bg-black/10 opacity-0 hover:opacity-100 transition-opacity duration-300" style="display:none;">
2214          <div class="w-10 h-10 bg-red-600/80 rounded-full flex items-center justify-center hover:bg-red-700/90 transition-colors shadow-lg">
2215            <i class="fas fa-pause text-white text-sm"></i>
2216          </div>
2217        </div>
2218      </div>
2219    </div>
2220  </div>
2221</div>
2222
2223<!-- Hls.js -->
2224<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
vendor: 2 bytes, line 2224
2224
2225<script>
2226  const streams = {
2227    video1: "https://cdn.vod.br1.jmvstream.com/vod/vod_323/f/5y8m34f81kr247m/h/4/playlist.m3u8?uf085lum5fbz=hr9yd7dh87le",
2228    video2: "https://cdn.vod.br1.jmvstream.com/vod/vod_323/f/38ppdvzqd22mpk9/h/4/playlist.m3u8?uf085lum5fbz=hr9yd7dh87le",
2229  };
2230
2231  Object.keys(streams).forEach(id => {
2232    const video = document.getElementById(id);
2233    const playBtn = document.getElementById("playBtn" + id.slice(-1));
2234    const pauseBtn = document.getElementById("pauseBtn" + id.slice(-1));
2235
2236    if (video.canPlayType("application/vnd.apple.mpegurl")) {
2237      video.src = streams[id];
2238    } else if (Hls.isSupported()) {
2239      const hls = new Hls();
2240      hls.loadSource(streams[id]);
2241      hls.attachMedia(video);
2242    }
2243
2244    // Controles overlay
2245    playBtn.addEventListener("click", () => {
2246      video.play();
2247      playBtn.style.display = "none";
2248      pauseBtn.style.display = "flex";
2249    });
2250    pauseBtn.addEventListener("click", () => {
2251      video.pause();
2252      playBtn.style.display = "flex";
2253      pauseBtn.style.display = "none";
2254    });
2255  });
2256</script>
2256
2257
2258
2259<!-- Bottom Navigation -->
2260<div class="absolute bottom-0 left-0 right-0 px-4 py-2" style="background-color: #7D1B1A;">
2261    <div class="flex justify-around items-center">
2262        <button data-nav="home" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70">
2263            <i class="fas fa-home text-sm mb-1"></i>
2264        </button>
2265        <button data-nav="pedido" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70">
2266            <i class="fas fa-radio text-sm mb-1"></i>
2267        </button>
2268        <button data-nav="sorteios" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70">
2269            <i class="fas fa-gift text-sm mb-1"></i>
2270        </button>
2271        <button data-nav="spotify" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70">
2272            <i class="fas fa-music text-sm mb-1"></i>
2273        </button>
2274        <button data-nav="videos" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70">
2275            <i class="fas fa-play text-sm mb-1"></i>
2276        </button>
2277    </div>
2278    <!-- Home Indicator -->
2279    <div class="flex justify-center mt-2">
2280        <div class="w-32 h-1 bg-white/30 rounded-full"></div>
2281    </div>
2282</div>
2283
2284<style>
2285@keyframes marquee {
2286    0% { transform: translateX(100%); }
2287    100% { transform: translateX(-100%); }
2288}
2289
2290.animate-marquee {
2291    animation: marquee 15s linear infinite;
2292}
2293</style>
2294
2295<script>
2296document.addEventListener('DOMContentLoaded', function() {
2297    // Video 1 controls
2298    const video1 = document.getElementById('video1');
2299    const playBtn1 = document.getElementById('playBtn1');
2300    const pauseBtn1 = document.getElementById('pauseBtn1');
2301
2302    playBtn1.addEventListener('click', function() {
2303        if (video1.paused) {
2304            video1.play();
2305            playBtn1.style.display = 'none';
2306            pauseBtn1.style.display = 'flex';
2307        }
2308    });
2309
2310    pauseBtn1.addEventListener('click', function() {
2311        if (!video1.paused) {
2312            video1.pause();
2313            pauseBtn1.style.display = 'none';
2314            playBtn1.style.display = 'flex';
2315        }
2316    });
2317
2318    video1.addEventListener('ended', function() {
2319        pauseBtn1.style.display = 'none';
2320        playBtn1.style.display = 'flex';
2321    });
2322
2323    // Video 2 controls
2324    const video2 = document.getElementById('video2');
2325    const playBtn2 = document.getElementById('playBtn2');
2326    const pauseBtn2 = document.getElementById('pauseBtn2');
2327
2328    playBtn2.addEventListener('click', function() {
2329        if (video2.paused) {
2330            video2.play();
2331            playBtn2.style.display = 'none';
2332            pauseBtn2.style.display = 'flex';
2333        }
2334    });
2335
2336    pauseBtn2.addEventListener('click', function() {
2337        if (!video2.paused) {
2338            video2.pause();
2339            pauseBtn2.style.display = 'none';
2340            playBtn2.style.display = 'flex';
2341        }
2342    });
2343
2344    video2.addEventListener('ended', function() {
2345        pauseBtn2.style.display = 'none';
2346        playBtn2.style.display = 'flex';
2347    });
2348});
2349</script>
2349                                </div>
2350                                
2351                                <!-- Página Programação (oculta inicialmente) -->
2352                                <div id="page-programacao" class="app-page hidden" role="tabpanel" aria-labelledby="nav-programacao">
2353                                    <!-- Status Bar -->
2354<div class="px-4 py-1 flex justify-between items-center text-white text-xs" style="background-color: #7D1B1A;">
2355    <span>10:22</span>
2356    <div class="flex items-center gap-1">
2357        <i class="fas fa-signal text-xs"></i>
2358        <i class="fas fa-wifi text-xs"></i>
2359        <div class="bg-white text-black px-1 rounded text-[10px] font-bold">87</div>
2360    </div>
2361</div>
2362
2363<!-- Header -->
2364<div class="px-4 py-3 flex items-center" style="background-color: #7D1B1A;">
2365    <button class="back-button mr-3" data-nav="home">
2366        <i class="fas fa-chevron-left text-white text-sm"></i>
2367    </button>
2368    <span class="text-white text-sm mr-4">Home</span>
2369    <div class="flex-1 text-center">
2370        <h1 class="text-white text-sm font-semibold">Programação</h1>
2371    </div>
2372</div>
2373
2374<!-- Days of Week Tabs -->
2375<div class="px-4 py-3" style="background-color: #7D1B1A;">
2376    <div class="flex justify-between items-center text-white text-[9px]">
2377        <button class="day-tab px-2 py-1" data-day="dom">Dom</button>
2378        <button class="day-tab px-2 py-1" data-day="seg">Seg</button>
2379        <button class="day-tab px-2 py-1" data-day="ter">Ter</button>
2380        <button class="day-tab px-2 py-1" data-day="qua">Qua</button>
2381        <button class="day-tab px-2 py-1 bg-white text-black rounded active" data-day="qui">Qui</button>
2382        <button class="day-tab px-2 py-1" data-day="sex">Sex</button>
2383        <button class="day-tab px-2 py-1" data-day="sab">Sáb</button>
2384    </div>
2385</div>
2386
2387<!-- Programming Content -->
2388<div class="bg-black flex-1 px-4 py-4">
2389    <!-- Programming for each day -->
2390    
2391    <!-- Sunday -->
2392    <div id="prog-dom" class="day-content hidden">
2393        <div class="space-y-3">
2394            <div class="rounded-lg p-4 flex items-center gap-4" style="background-color: #7D1B1A;">
2395                <div class="w-16 h-16 rounded overflow-hidden">
2396                    <img src="assets/images/imagens-app-personalizacao/programacao/chip-tecnologia-hardware-streaming-jmv-news-jmv-stream-jmv-technology.webp" 
2397                         alt="JMV Tech Domingo" 
2398                         class="w-full h-full object-cover">
2399                </div>
2400                <div class="flex-1">
2401                    <h3 class="text-white font-semibold text-sm">JMV Tech Domingo</h3>
2402                    <p class="text-white/70 text-xs">08:00 Horas</p>
2403                </div>
2404                <i class="fas fa-chevron-right text-white text-sm"></i>
2405            </div>
2406            <div class="rounded-lg p-4 flex items-center gap-4" style="background-color: #7D1B1A;">
2407                <div class="w-16 h-16 rounded overflow-hidden">
2408                    <img src="assets/images/imagens-app-personalizacao/programacao/estudio-transmissao-profissional-streaming-jmv-news-jmv-stream-jmv-technology.webp" 
2409                         alt="Transmissão ao Vivo" 
2410                         class="w-full h-full object-cover">
2411                </div>
2412                <div class="flex-1">
2413                    <h3 class="text-white font-semibold text-sm">Transmissão ao Vivo</h3>
2414                    <p class="text-white/70 text-xs">20:00 Horas</p>
2415                </div>
2416                <i class="fas fa-chevron-right text-white text-sm"></i>
2417            </div>
2418        </div>
2419    </div>
2420
2421    <!-- Monday -->
2422    <div id="prog-seg" class="day-content hidden">
2423        <div class="space-y-3">
2424            <div class="rounded-lg p-4 flex items-center gap-4" style="background-color: #7D1B1A;">
2425                <div class="w-16 h-16 rounded overflow-hidden">
2426                    <img src="assets/images/imagens-app-personalizacao/programacao/logo-oficial-identidade-visual-streaming-jmv-news-jmv-stream-jmv-technology.webp" 
2427                         alt="JMV Manhã Tech" 
2428                         class="w-full h-full object-cover">
2429                </div>
2430                <div class="flex-1">
2431                    <h3 class="text-white font-semibold text-sm">JMV Manhã Tech</h3>
2432                    <p class="text-white/70 text-xs">06:00 Horas</p>
2433                </div>
2434                <i class="fas fa-chevron-right text-white text-sm"></i>
2435            </div>
2436            <div class="rounded-lg p-4 flex items-center gap-4" style="background-color: #7D1B1A;">
2437                <div class="w-16 h-16 rounded overflow-hidden">
2438                    <img src="assets/images/imagens-app-personalizacao/programacao/desenvolvimento-tecnologia-programacao-streaming-jmv-news-jmv-stream-jmv-technology.webp" 
2439                         alt="Desenvolvimento de Apps" 
2440                         class="w-full h-full object-cover">
2441                </div>
2442                <div class="flex-1">
2443                    <h3 class="text-white font-semibold text-sm">Desenvolvimento de Apps</h3>
2444                    <p class="text-white/70 text-xs">18:00 Horas</p>
2445                </div>
2446                <i class="fas fa-chevron-right text-white text-sm"></i>
2447            </div>
2448        </div>
2449    </div>
2450
2451    <!-- Tuesday -->
2452    <div id="prog-ter" class="day-content hidden">
2453        <div class="space-y-3">
2454            <div class="rounded-lg p-4 flex items-center gap-4" style="background-color: #7D1B1A;">
2455                <div class="w-16 h-16 rounded overflow-hidden">
2456                    <img src="assets/images/imagens-app-personalizacao/programacao/west-api-hospedagem-de-videos-streaming-jmv-news-jmv-stream-jmv-technology.webp" 
2457                         alt="JMV Soluções Stream" 
2458                         class="w-full h-full object-cover">
2459                </div>
2460                <div class="flex-1">
2461                    <h3 class="text-white font-semibold text-sm">JMV Soluções Stream</h3>
2462                    <p class="text-white/70 text-xs">10:00 Horas</p>
2463                </div>
2464                <i class="fas fa-chevron-right text-white text-sm"></i>
2465            </div>
2466            <div class="rounded-lg p-4 flex items-center gap-4" style="background-color: #7D1B1A;">
2467                <div class="w-16 h-16 rounded overflow-hidden">
2468                    <img src="assets/images/imagens-app-personalizacao/programacao/web-hosting-hospedagem-sites-streaming-jmv-news-jmv-stream-jmv-technology.webp" 
2469                         alt="Hospedagem e Nuvem" 
2470                         class="w-full h-full object-cover">
2471                </div>
2472                <div class="flex-1">
2473                    <h3 class="text-white font-semibold text-sm">Hospedagem e Nuvem</h3>
2474                    <p class="text-white/70 text-xs">19:00 Horas</p>
2475                </div>
2476                <i class="fas fa-chevron-right text-white text-sm"></i>
2477            </div>
2478        </div>
2479    </div>
2480
2481    <!-- Wednesday -->
2482    <div id="prog-qua" class="day-content hidden">
2483        <div class="space-y-3">
2484            <div class="rounded-lg p-4 flex items-center gap-4" style="background-color: #7D1B1A;">
2485                <div class="w-16 h-16 rounded overflow-hidden">
2486                    <img src="assets/images/imagens-app-personalizacao/programacao/laboratorio-inovacao-digital-streaming-jmv-news-jmv-stream-jmv-technology.webp" 
2487                         alt="Laboratório Web" 
2488                         class="w-full h-full object-cover">
2489                </div>
2490                <div class="flex-1">
2491                    <h3 class="text-white font-semibold text-sm">Laboratório Web</h3>
2492                    <p class="text-white/70 text-xs">12:00 Horas</p>
2493                </div>
2494                <i class="fas fa-chevron-right text-white text-sm"></i>
2495            </div>
2496            <div class="rounded-lg p-4 flex items-center gap-4" style="background-color: #7D1B1A;">
2497                <div class="w-16 h-16 rounded overflow-hidden">
2498                    <img src="assets/images/imagens-app-personalizacao/programacao/ideias-inovacao-projetos-streaming-jmv-news-jmv-stream-jmv-technology.webp" 
2499                         alt="JMV Noite Inovação" 
2500                         class="w-full h-full object-cover">
2501                </div>
2502                <div class="flex-1">
2503                    <h3 class="text-white font-semibold text-sm">JMV Noite Inovação</h3>
2504                    <p class="text-white/70 text-xs">21:00 Horas</p>
2505                </div>
2506                <i class="fas fa-chevron-right text-white text-sm"></i>
2507            </div>
2508        </div>
2509    </div>
2510
2511    <!-- Thursday (Active) -->
2512    <div id="prog-qui" class="day-content">
2513        <div class="space-y-3">
2514            <div class="rounded-lg p-4 flex items-center gap-4" style="background-color: #7D1B1A;">
2515                <div class="w-16 h-16 rounded overflow-hidden">
2516                    <img src="assets/images/imagens-app-personalizacao/programacao/oficial-identidade-visual-streaming-jmv-news-jmv-stream-jmv-technology.webp" 
2517                         alt="JMV News Tech" 
2518                         class="w-full h-full object-cover">
2519                </div>
2520                <div class="flex-1">
2521                    <h3 class="text-white font-semibold text-sm">JMV News Tech</h3>
2522                    <p class="text-white/70 text-xs">14:00 Horas</p>
2523                </div>
2524                <i class="fas fa-chevron-right text-white text-sm"></i>
2525            </div>
2526            <div class="rounded-lg p-4 flex items-center gap-4" style="background-color: #7D1B1A;">
2527                <div class="w-16 h-16 rounded overflow-hidden">
2528                    <img src="assets/images/imagens-app-personalizacao/programacao/interface-ux-ui-design-app-streaming-jmv-news-jmv-stream-jmv-technology.webp" 
2529                         alt="Transformação Digital" 
2530                         class="w-full h-full object-cover">
2531                </div>
2532                <div class="flex-1">
2533                    <h3 class="text-white font-semibold text-sm">Transformação Digital</h3>
2534                    <p class="text-white/70 text-xs">16:00 Horas</p>
2535                </div>
2536                <i class="fas fa-chevron-right text-white text-sm"></i>
2537            </div>
2538        </div>
2539    </div>
2540
2541    <!-- Friday -->
2542    <div id="prog-sex" class="day-content hidden">
2543        <div class="space-y-3">
2544            <div class="rounded-lg p-4 flex items-center gap-4" style="background-color: #7D1B1A;">
2545                <div class="w-16 h-16 rounded overflow-hidden">
2546                    <img src="assets/images/imagens-app-personalizacao/programacao/estudio-transmissao-profissional-streaming-jmv-news-jmv-stream-jmv-technology.webp" 
2547                         alt="JMV Sexta Stream" 
2548                         class="w-full h-full object-cover">
2549                </div>
2550                <div class="flex-1">
2551                    <h3 class="text-white font-semibold text-sm">JMV Sexta Stream</h3>
2552                    <p class="text-white/70 text-xs">15:00 Horas</p>
2553                </div>
2554                <i class="fas fa-chevron-right text-white text-sm"></i>
2555            </div>
2556            <div class="rounded-lg p-4 flex items-center gap-4" style="background-color: #7D1B1A;">
2557                <div class="w-16 h-16 rounded overflow-hidden">
2558                    <img src="assets/images/imagens-app-personalizacao/programacao/chip-tecnologia-hardware-streaming-jmv-news-jmv-stream-jmv-technology.webp" 
2559                         alt="Preparação Tech" 
2560                         class="w-full h-full object-cover">
2561                </div>
2562                <div class="flex-1">
2563                    <h3 class="text-white font-semibold text-sm">Preparação Tech</h3>
2564                    <p class="text-white/70 text-xs">22:00 Horas</p>
2565                </div>
2566                <i class="fas fa-chevron-right text-white text-sm"></i>
2567            </div>
2568        </div>
2569    </div>
2570
2571    <!-- Saturday -->
2572    <div id="prog-sab" class="day-content hidden">
2573        <div class="space-y-3">
2574            <div class="rounded-lg p-4 flex items-center gap-4" style="background-color: #7D1B1A;">
2575                <div class="w-16 h-16 rounded overflow-hidden">
2576                    <img src="assets/images/imagens-app-personalizacao/programacao/desenvolvimento-tecnologia-programacao-streaming-jmv-news-jmv-stream-jmv-technology.webp" 
2577                         alt="JMV Sábado Code" 
2578                         class="w-full h-full object-cover">
2579                </div>
2580                <div class="flex-1">
2581                    <h3 class="text-white font-semibold text-sm">JMV Sábado Code</h3>
2582                    <p class="text-white/70 text-xs">11:00 Horas</p>
2583                </div>
2584                <i class="fas fa-chevron-right text-white text-sm"></i>
2585            </div>
2586            <div class="rounded-lg p-4 flex items-center gap-4" style="background-color: #7D1B1A;">
2587                <div class="w-16 h-16 rounded overflow-hidden">
2588                    <img src="assets/images/imagens-app-personalizacao/programacao/west-api-hospedagem-de-videos-streaming-jmv-news-jmv-stream-jmv-technology.webp" 
2589                         alt="Hospedagem de Vídeos" 
2590                         class="w-full h-full object-cover">
2591                </div>
2592                <div class="flex-1">
2593                    <h3 class="text-white font-semibold text-sm">Hospedagem de Vídeos</h3>
2594                    <p class="text-white/70 text-xs">20:30 Horas</p>
2595                </div>
2596                <i class="fas fa-chevron-right text-white text-sm"></i>
2597            </div>
2598        </div>
2599    </div>
2600</div>
2601
2602<!-- Bottom Navigation -->
2603<div class="absolute bottom-0 left-0 right-0 px-4 py-2" style="background-color: #7D1B1A;">
2604    <div class="flex justify-around items-center">
2605        <button data-nav="home" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70">
2606            <i class="fas fa-home text-sm mb-1"></i>
2607        </button>
2608        <button data-nav="pedido" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70">
2609            <i class="fas fa-radio text-sm mb-1"></i>
2610        </button>
2611        <button data-nav="sorteios" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70">
2612            <i class="fas fa-gift text-sm mb-1"></i>
2613        </button>
2614        <button data-nav="spotify" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70">
2615            <i class="fas fa-music text-sm mb-1"></i>
2616        </button>
2617        <button data-nav="videos" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70">
2618            <i class="fas fa-play text-sm mb-1"></i>
2619        </button>
2620    </div>
2621    <!-- Home Indicator -->
2622    <div class="flex justify-center mt-2">
2623        <div class="w-32 h-1 bg-white/30 rounded-full"></div>
2624    </div>
2625</div>
2626
2627<script>
2628document.addEventListener('DOMContentLoaded', function() {
2629    // Tab switching functionality
2630    const dayTabs = document.querySelectorAll('.day-tab');
2631    const dayContents = document.querySelectorAll('.day-content');
2632
2633    dayTabs.forEach(tab => {
2634        tab.addEventListener('click', function() {
2635            const day = this.getAttribute('data-day');
2636            
2637            // Remove active class from all tabs
2638            dayTabs.forEach(t => {
2639                t.classList.remove('active', 'bg-white', 'text-black', 'rounded');
2640                t.classList.add('text-white');
2641            });
2642            
2643            // Add active class to clicked tab
2644            this.classList.add('active', 'bg-white', 'text-black', 'rounded');
2645            this.classList.remove('text-white');
2646            
2647            // Hide all day contents
2648            dayContents.forEach(content => {
2649                content.classList.add('hidden');
2650            });
2651            
2652            // Show selected day content
2653            document.getElementById('prog-' + day).classList.remove('hidden');
2654        });
2655    });
2656});
2657</script>
2657
2658
2659<style>
2660.day-content.hidden {
2661    display: none;
2662}
2663
2664.day-tab {
2665    transition: all 0.3s ease;
2666}
2667
2668.day-tab:hover {
2669    background-color: rgba(255, 255, 255, 0.1);
2670    border-radius: 4px;
2671}
2672</style>                                </div>
2673                                
2674                                <!-- Página Top 10 (oculta inicialmente) -->
2675                                <div id="page-top10" class="app-page hidden" role="tabpanel" aria-labelledby="nav-top10">
2676                                    <!-- Status Bar -->
2677<div class="px-4 py-1 flex justify-between items-center text-white text-xs" style="background-color: #7D1B1A;">
2678    <span>10:22</span>
2679    <div class="flex items-center gap-1">
2680        <i class="fas fa-signal text-xs"></i>
2681        <i class="fas fa-wifi text-xs"></i>
2682        <div class="bg-white text-black px-1 rounded text-[10px] font-bold">87</div>
2683    </div>
2684</div>
2685
2686<!-- Header -->
2687<div class="px-4 py-3 flex items-center" style="background-color: #7D1B1A;">
2688    <button class="back-button mr-3" data-nav="home">
2689        <i class="fas fa-chevron-left text-white text-sm"></i>
2690    </button>
2691    <span class="text-white text-sm mr-4">Voltar</span>
2692    <div class="flex-1 text-center">
2693        <img src="assets/images/logo-jmv-news-logomarca-oficial-app-para-radios-tv-streaming-jmv-technology.webp" 
2694             alt="JMV News Logo" 
2695             class="h-6 object-contain mx-auto">
2696    </div>
2697</div>
2698
2699<!-- Content Area -->
2700<div class="bg-black flex-1 px-4 py-6 pb-24 overflow-y-auto">
2701    <!-- Title Section -->
2702    <div class="mb-6">
2703        <h1 class="text-white text-sm font-bold mb-1">Top 10 Músicas</h1>
2704        <p class="text-gray-400 text-[9px]">As mais tocadas da semana</p>
2705    </div>
2706
2707    <!-- Music List -->
2708    <div class="space-y-3">
2709        <!-- Music 1 - Flor E O Beija Flor - Henrique & Juliano -->
2710        <div class="flex items-center gap-3 p-2 rounded-lg" style="background-color: #1a1a1a;">
2711            <div class="w-7 h-7 rounded-full flex items-center justify-center text-white font-bold text-xs" style="background-color: #7D1B1A;">
2712                1
2713            </div>
2714            <div class="w-8 h-8 rounded overflow-hidden">
2715                <img src="assets/images/imagens-app-personalizacao/top10/henrique-e-juliano-dvd-sertanejo-streaming-jmv-news-jmv-stream-jmv-technology.webp"
2716                     alt="Flor E O Beija Flor"
2717                     class="w-full h-full object-cover">
2718            </div>
2719            <div class="flex-1">
2720                <h3 class="text-white font-semibold text-[9px]">Flor E O Beija Flor</h3>
2721                <p class="text-gray-400 text-[7px]">Henrique & Juliano</p>
2722            </div>
2723        </div>
2724
2725        <!-- Music 2 - Na Hora De Amar - Gusttavo Lima -->
2726        <div class="flex items-center gap-3 p-2 rounded-lg" style="background-color: #1a1a1a;">
2727            <div class="w-7 h-7 rounded-full flex items-center justify-center text-white font-bold text-xs" style="background-color: #7D1B1A;">
2728                2
2729            </div>
2730            <div class="w-8 h-8 rounded overflow-hidden">
2731                <img src="assets/images/imagens-app-personalizacao/top10/embaixador-gusttavo-lima-streaming-jmv-news-jmv-stream-jmv-technology.webp"
2732                     alt="Na Hora De Amar"
2733                     class="w-full h-full object-cover">
2734            </div>
2735            <div class="flex-1">
2736                <h3 class="text-white font-semibold text-[9px]">Na Hora De Amar</h3>
2737                <p class="text-gray-400 text-[7px]">
2737Gusttavo Lima</p>
2738            </div>
2739        </div>
2740
2741        <!-- Music 3 - Desbloqueado - Diego & Victor Hugo -->
2742        <div class="flex items-center gap-3 p-2 rounded-lg" style="background-color: #1a1a1a;">
2743            <div class="w-7 h-7 rounded-full flex items-center justify-center text-white font-bold text-xs" style="background-color: #7D1B1A;">
2744                3
2745            </div>
2746            <div class="w-8 h-8 rounded overflow-hidden">
2747                <img src="assets/images/imagens-app-personalizacao/top10/dupla-sertaneja-equilibrio-streaming-jmv-news-jmv-stream-jmv-technology.webp"
2748                     alt="Desbloqueado"
2749                     class="w-full h-full object-cover">
2750            </div>
2751            <div class="flex-1">
2752                <h3 class="text-white font-semibold text-[9px]">Desbloqueado</h3>
2753                <p class="text-gray-400 text-[7px]">Diego & Victor Hugo</p>
2754            </div>
2755        </div>
2756
2757        <!-- Music 4 - Quebrando Protocolo - Gusttavo Lima -->
2758        <div class="flex items-center gap-3 p-2 rounded-lg" style="background-color: #1a1a1a;">
2759            <div class="w-7 h-7 rounded-full flex items-center justify-center text-white font-bold text-xs" style="background-color: #7D1B1A;">
2760                4
2761            </div>
2762            <div class="w-8 h-8 rounded overflow-hidden">
2763                <img src="assets/images/imagens-app-personalizacao/top10/gusttavo-lima-buteco-show-streaming-jmv-news-jmv-stream-jmv-technology.webp"
2764                     alt="Quebrando Protocolo"
2765                     class="w-full h-full object-cover">
2766            </div>
2767            <div class="flex-1">
2768                <h3 class="text-white font-semibold text-[9px]">Quebrando Protocolo</h3>
2769                <p class="text-gray-400 text-[7px]">
2769Gusttavo Lima</p>
2770            </div>
2771        </div>
2772
2773        <!-- Music 5 - Ainda Ontem Chorei De Saud... - Fernando & Sorocaba -->
2774        <div class="flex items-center gap-3 p-2 rounded-lg" style="background-color: #1a1a1a;">
2775            <div class="w-7 h-7 rounded-full flex items-center justify-center text-white font-bold text-xs" style="background-color: #7D1B1A;">
2776                5
2777            </div>
2778            <div class="w-8 h-8 rounded overflow-hidden">
2779                <img src="assets/images/imagens-app-personalizacao/top10/fernando-e-sorocaba-on-fire-streaming-jmv-news-jmv-stream-jmv-technology.webp"
2780                     alt="Ainda Ontem Chorei De Saudade"
2781                     class="w-full h-full object-cover">
2782            </div>
2783            <div class="flex-1">
2784                <h3 class="text-white font-semibold text-[9px]">Ainda Ontem Chorei De Saud...</h3>
2785                <p class="text-gray-400 text-[7px]">Fernando & Sorocaba</p>
2786            </div>
2787        </div>
2788
2789        <!--
2790        Music 6 - Voa Beija Flor - Jorge & Mateus
2791        <div class="flex items-center gap-3 p-2 rounded-lg" style="background-color: #1a1a1a;">
2792            <div class="w-7 h-7 rounded-full flex items-center justify-center text-white font-bold text-xs" style="background-color: #7D1B1A;">
2793            6
2794            </div>
2795            <div class="w-8 h-8 rounded overflow-hidden">
2796            <img src="assets/images/imagens-app-personalizacao/top10/jorge-e-mateus-cantores-sertanejo-streaming-jmv-news-jmv-stream-jmv-technology.webp"
2797                 alt="Voa Beija Flor"
2798                 class="w-full h-full object-cover">
2799            </div>
2800            <div class="flex-1">
2801            <h3 class="text-white font-semibold text-[9px]">Voa Beija Flor</h3>
2802            <p class="text-gray-400 text-[7px]">Jorge & Mateus</p>
2803            </div>
2804        </div>
2805
2806        Music 7 - Alô Bebê - Henrique & Juliano
2807        <div class="flex items-center gap-3 p-2 rounded-lg" style="background-color: #1a1a1a;">
2808            <div class="w-7 h-7 rounded-full flex items-center justify-center text-white font-bold text-xs" style="background-color: #7D1B1A;">
2809            7
2810            </div>
2811            <div class="w-8 h-8 rounded overflow-hidden">
2812            <img src="assets/images/imagens-app-personalizacao/top10/henrique-e-juliano-sertanejo-ao-vivo-streaming-jmv-news-jmv-stream-jmv-technology.webp"
2813                 alt="Alô Bebê"
2814                 class="w-full h-full object-cover">
2815            </div>
2816            <div class="flex-1">
2817            <h3 class="text-white font-semibold text-[9px]">Alô Bebê</h3>
2818            <p class="text-gray-400 text-[7px]">Henrique & Juliano</p>
2819            </div>
2820        </div>
2821
2822        Music 8 - Nosso Quadro - Ana Castela
2823        <div class="flex items-center gap-3 p-2 rounded-lg" style="background-color: #1a1a1a;">
2824            <div class="w-7 h-7 rounded-full flex items-center justify-center text-white font-bold text-xs" style="background-color: #7D1B1A;">
2825            8
2826            </div>
2827            <div class="w-8 h-8 rounded overflow-hidden">
2828            <img src="assets/images/imagens-app-personalizacao/top10/marilia-mendonca-cantora-sertaneja-streaming-jmv-news-jmv-stream-jmv-technology.webp"
2829                 alt="Nosso Quadro"
2830                 class="w-full h-full object-cover">
2831            </div>
2832            <div class="flex-1">
2833            <h3 class="text-white font-semibold text-[9px]">Nosso Quadro</h3>
2834            <p class="text-gray-400 text-[7px]">Ana Castela</p>
2835            </div>
2836        </div>
2837
2838        Music 9 - Eu Quero Tchu Eu Quero Tcha - João Lucas & Marcelo
2839        <div class="flex items-center gap-3 p-2 rounded-lg" style="background-color: #1a1a1a;">
2840            <div class="w-7 h-7 rounded-full flex items-center justify-center text-white font-bold text-xs" style="background-color: #7D1B1A;">
2841            9
2842            </div>
2843            <div class="w-8 h-8 rounded overflow-hidden">
2844            <img src="assets/images/imagens-app-personalizacao/top10/henrique-e-juliano-musica-sertaneja-streaming-jmv-news-jmv-stream-jmv-technology.webp"
2845                 alt="Eu Quero Tchu Eu Quero Tcha"
2846                 class="w-full h-full object-cover">
2847            </div>
2848            <div class="flex-1">
2849            <h3 class="text-white font-semibold text-[9px]">Eu Quero Tchu Eu Quero Tcha</h3>
2850            <p class="text-gray-400 text-[7px]">João Lucas & Marcelo</p>
2851            </div>
2852        </div>
2853
2854        Music 10 - Coração Cachorro - Simone Mendes
2855        <div class="flex items-center gap-3 p-2 rounded-lg" style="background-color: #1a1a1a;">
2856            <div class="w-7 h-7 rounded-full flex items-center justify-center text-white font-bold text-xs" style="background-color: #7D1B1A;">
2857            10
2858            </div>
2859            <div class="w-8 h-8 rounded overflow-hidden">
2860            <img src="assets/images/imagens-app-personalizacao/top10/marili
2860a-mendonca-show-sertanejo-streaming-jmv-news-jmv-stream-jmv-technology.webp"
2861                 alt="Coração Cachorro"
2862                 class="w-full h-full object-cover">
2863            </div>
2864            <div class="flex-1">
2865            <h3 class="text-white font-semibold text-[9px]">Coração Cachorro</h3>
2866            <p class="text-gray-400 text-[7px]">Simone Mendes</p>
2867            </div>
2868        </div>
2869        -->
2870    </div>
2871</div>
2872
2873<!-- Home Indicator -->
2874<div class="flex justify-center py-2 bg-black">
2875    <div class="w-32 h-1 bg-white rounded-full"></div>
2876</div>
2877
2878<!-- Bottom Navigation -->
2879<div class="fixed bottom-0 left-0 right-0 px-4 py-2 z-50" style="background-color: #7D1B1A;">
2880    <div class="flex justify-around items-center">
2881        <button data-nav="home" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70">
2882            <i class="fas fa-home text-sm mb-1"></i>
2883        </button>
2884        <button data-nav="pedido" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70">
2885            <i class="fas fa-radio text-sm mb-1"></i>
2886        </button>
2887        <button data-nav="sorteios" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70">
2888            <i class="fas fa-gift text-sm mb-1"></i>
2889        </button>
2890        <button data-nav="spotify" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70">
2891            <i class="fas fa-music text-sm mb-1"></i>
2892        </button>
2893        <button data-nav="videos" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70">
2894            <i class="fas fa-play text-sm mb-1"></i>
2895        </button>
2896    </div>
2897    <!-- Home Indicator -->
2898    <div class="flex justify-center mt-2">
2899        <div class="w-32 h-1 bg-white/30 rounded-full"></div>
2900    </div>
2901</div>                                </div>
2902                                
2903                                <!-- Página Pedido (oculta inicialmente) -->
2904                                <div id="page-pedido" class="app-page hidden" role="tabpanel" aria-labelledby="nav-pedido">
2905                                    <!-- Status Bar -->
2906<div class="px-4 py-1 flex justify-between items-center text-white text-xs" style="background-color: #7D1B1A;">
2907    <span>10:22</span>
2908    <div class="flex items-center gap-1">
2909        <i class="fas fa-signal text-xs"></i>
2910        <i class="fas fa-wifi text-xs"></i>
2911        <div class="bg-white text-black px-1 rounded text-[10px] font-bold">87</div>
2912    </div>
2913</div>
2914
2915<!-- Header -->
2916<div class="px-4 py-3 flex items-center" style="background-color: #7D1B1A;">
2917    <button class="back-button mr-3" data-nav="home">
2918        <i class="fas fa-chevron-left text-white text-sm"></i>
2919    </button>
2920    <span class="text-white text-sm mr-4">Voltar</span>
2921    <div class="flex-1 text-center">
2922        <img src="assets/images/logo-jmv-news-logomarca-oficial-app-para-radios-tv-streaming-jmv-technology.webp" 
2923             alt="JMV News Logo" 
2924             class="h-6 object-contain mx-auto">
2925    </div>
2926</div>
2927
2928<!-- Content Area -->
2929<div class="bg-black flex-1 px-4 py-6 overflow-y-auto">
2930    <!-- Radio Player Card -->
2931    <div class="rounded-lg p-4 mb-6 relative" style="background-color: #7D1B1A;">
2932        <div class="flex flex-col items-start">
2933            <!-- Imagem -->
2934  
2935            <div class="w-12 h-12 bg-white rounded-lg flex items-center justify-center mb-2 p-2 overflow-hidden">
2936                <img src="assets/images/logo-jmv-news-logomarca-oficial-app-para-radios-tv-streaming-jmv-technology.webp" 
2937                     alt="JMV News Logo" 
2938                     class="max-w-8 max-h-8 object-contain animate-spin-slow logo-rotativa-fixa"
2939                     style="filter: brightness(0); animation: spin 10s linear infinite; max-width: 32px !important; max-height: 32px !important; width: auto !important; height: auto !important;">
2940            </div>
2941         
2942            <!-- Textos abaixo da imagem -->
2943            <div>
2944                <h3 class="text-white font-bold text-[10px] mb-1">JMV NEWS</h3>
2945                <p class="text-white/80 text-[9px]">A rádio que conecta você!</p>
2946            </div>
2947        </div>
2948 
2949        <div class="absolute flex items-center justify-center right-[-1rem] my-auto h-20 w-20 bg-black rounded-full -mt-12">
2950            <button id="playPauseBtn" class="w-12 h-12 rounded-full flex items-center justify-center transition-opacity duration-200 hover:opacity-70" style="background-color: #7D1B1A;">
2951                <i id="playPauseIcon" class="fas fa-play text-white text-lg"></i>
2952            </button>
2953        </div>
2954    </div>
2955
2956    <!-- Music Request Card -->
2957    <div class="rounded-lg p-4" style="background-color: #7D1B1A;">
2958        <div class="text-center mb-4">
2959            <h2 class="text-white font-bold text-[10px] mb-2">Realize seu pedido de música</h2>
2960            <p class="text-white/80 text-[9px] leading-relaxed">Informe qual música e artista você gostaria de ouvir, e adicione uma mensagem se desejar.</p>
2961        </div>
2962
2963        <!-- Form -->
2964        <div class="space-y-4">
2965            <!-- Music Input -->
2966            <div>
2967                <input type="text" 
2968                       placeholder="Nome da música e artista" 
2969                       class="w-full px-3 py-3 bg-transparent border border-white/30 rounded-lg text-white text-[9px] placeholder-white/60 focus:border-white focus:outline-none">
2970            </div>
2971
2972            <!-- Message Input - Tamanho reduzido -->
2973            <div>
2974                <textarea placeholder="Sua mensagem ou comentário (opcional)" 
2975                          rows="2"
2976                          class="w-full px-3 py-3 bg-transparent border border-white/30 rounded-lg text-white text-[9px] placeholder-white/60 focus:border-white focus:outline-none resize-none"></textarea>
2977            </div>
2978
2979            <!-- Submit Button -->
2980            <button class="w-full py-3 bg-white rounded-lg text-[10px] font-bold transition-opacity duration-200 hover:opacity-90" style="color: #7D1B1A;">
2981                Enviar pedido de música
2982            </button>
2983        </div>
2984    </div>
2985</div>
2986
2987<!-- Audio Player (pré-conectado mas mudo) -->
2988<audio id="audioPlayer" preload="auto" muted style="display: none;">
2989    <source src="https://newsjmv.jmvstream.com/live" type="audio/mpeg">
2990    <source src="https://newsjmv.jmvstream.com/live" type="audio/wav">
2991    Seu navegador não suporta o elemento de áudio.
2992</audio>
2993
2994<!-- Bottom Navigation -->
2995<div class="absolute bottom-0 left-0 right-0 px-4 py-2" style="background-color: #7D1B1A;">
2996    <div class="flex justify-around items-center">
2997        <button data-nav="home" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70">
2998            <i class="fas fa-home text-sm mb-1"></i>
2999        </button>
3000        <button data-nav="pedido" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70">
3001            <i class="fas fa-radio text-sm mb-1"></i>
3002        </button>
3003        <button data-nav="sorteios" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70">
3004            <i class="fas fa-gift text-sm mb-1"></i>
3005        </button>
3006        <button data-nav="spotify" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70">
3007            <i class="fas fa-music text-sm mb-1"></i>
3008        </button>
3009        <button data-nav="videos" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70">
3010            <i class="fas fa-play text-sm mb-1"></i>
3011        </button>
3012    </div>
3013    <!-- Home Indicator -->
3014    <div class="flex justify-center mt-2">
3015        <div class="w-32 h-1 bg-white/30 rounded-full"></div>
3016    </div>
3017</div>
3018
3019<style>
3020@keyframes spin {
3021    from {
3022        transform: rotate(0deg);
3023    }
3024    to {
3025        transform: rotate(360deg);
3026    }
3027}
3028</style>
3029
3030<script>
3031document.addEventListener('DOMContentLoaded', function() {
3032    const audioPlayer = document.getElementById('audioPlayer');
3033    const playPauseBtn = document.getElementById('playPauseBtn');
3034    const playPauseIcon = document.getElementById('playPauseIcon');
3035    
3036    let isPlaying = false;
3037    let isConnected = false;
3038    
3039    // Pré-conectar o áudio quando a página carrega
3040    setTimeout(() => {
3041        audioPlayer.play().then(() => {
3042            // Conectado com sucesso, mas pausar imediatamente
3043            audioPlayer.pause();
3044            isConnected = true;
3045            console.log('Stream pré-conectado com sucesso');
3046        }).catch(error => {
3047            console.log('Tentando pré-conectar stream...', error);
3048            // Se falhar, tentar novamente em 2 segundos
3049            setTimeout(() => {
3050                audioPlayer.load(); // Recarregar o stream
3051            }, 2000);
3052        });
3053    }, 1000);
3054    
3055    playPauseBtn.addEventListener('click', function() {
3056        if (isPlaying) {
3057            // Pausar
3058            audioPlayer.pause();
3059            playPauseIcon.className = 'fas fa-play text-white text-lg';
3060            isPlaying = false;
3061            console.log('Rádio pausada');
3062        } else {
3063            // Tocar
3064            audioPlayer.muted = false; // Desmutar
3065            audioPlayer.play().then(() => {
3066                playPauseIcon.className = 'fas fa-pause text-white text-lg';
3067                isPlaying = true;
3068                console.log('Rádio tocando');
3069            }).catch(error => {
3070                console.error('Erro ao reproduzir áudio:', error);
3071                // Tentar recarregar o stream
3072                audioPlayer.load();
3073                setTimeout(() => {
3074                    audioPlayer.play().then(() => {
3075                        playPauseIcon.className = 'fas fa-pause text-white text-lg';
3076                        isPlaying = true;
3077                        console.log('Rádio tocando após reload');
3078                    }).catch(err => {
3079                        alert('Erro ao conectar com a rádio. Verifique sua conexão.');
3080                        console.error('Erro final:', err);
3081                    });
3082                }, 1000);
3083            });
3084        }
3085    });
3086    
3087    // Event listeners para controle automático
3088    audioPlayer.addEventListener('play', function() {
3089        if (!audioPlayer.muted) {
3090            playPauseIcon.className = 'fas fa-pause text-white text-lg';
3091            isPlaying = true;
3092        }
3093    });
3094    
3095    audioPlayer.addEventListener('pause', function() {
3096        playPauseIcon.className = 'fas fa-play text-white text-lg';
3097        isPlaying = false;
3098    });
3099    
3100    audioPlayer.addEventListener('error', function() {
3101        console.error('Erro no stream de áudio');
3102        playPauseIcon.className = 'fas fa-play text-white text-lg';
3103        isPlaying = false;
3104        // Tentar reconectar
3105        setTimeout(() => {
3106            audioPlayer.load();
3107        }, 3000);
3108    });
3109    
3110    audioPlayer.addEventListener('canplay', function() {
3111        isConnected = true;
3112        console.log('Stream pronto para reprodução');
3113    });
3114});
3115</script>
3115                                </div>
3116                                
3117                                <!-- Página Sorteios (oculta inicialmente) -->
3118                                <div id="page-sorteios" class="app-page hidden" role="tabpanel" aria-labelledby="nav-sorteios">
3119                                    <!-- Status Bar -->
3120<div class="px-4 py-1 flex justify-between items-center text-white text-xs" style="background-color: #7D1B1A;">
3121    <span>10:22</span>
3122    <div class="flex items-center gap-1">
3123        <i class="fas fa-signal text-xs"></i>
3124        <i class="fas fa-wifi text-xs"></i>
3125        <div class="bg-white text-black px-1 rounded text-[10px] font-bold">87</div>
3126    </div>
3127</div>
3128
3129<!-- Header -->
3130<div class="px-4 py-3 flex items-center" style="background-color: #7D1B1A;">
3131    <div class="flex-1 flex justify-center">
3132        <img src="assets/images/logo-jmv-news-logomarca-oficial-app-para-radios-tv-streaming-jmv-technology.webp" 
3133             alt="JMV News Logo" 
3134             class="h-4 object-contain">
3135    </div>
3136    <div class="w-4 h-4 bg-white rounded-full flex items-center justify-center">
3137        <i class="fas fa-user text-black text-[8px]"></i>
3138    </div>
3139</div>
3140
3141<!-- Tabs Section -->
3142<div class="bg-black px-4 py-3">
3143    <div class="flex justify-between items-center">
3144        <button class="text-white font-bold text-[10px] border-b-2 border-white pb-1 transition-opacity duration-200 hover:opacity-70">Todos</button>
3145        <button class="text-gray-400 font-bold text-[10px] transition-opacity duration-200 hover:opacity-70">Expirado</button>
3146    </div>
3147</div>
3148
3149<!-- Content Area -->
3150<div class="bg-black flex-1 px-4 py-4 overflow-y-auto pb-24">
3151    <!-- Sorteio 1 - Fone Bluetooth JBL -->
3152    <div class="rounded-lg p-2 mb-2 flex items-center gap-2 transition-opacity duration-200 hover:opacity-70 cursor-pointer" style="background-color: #7D1B1A;">
3153        <div class="w-16 h-16 bg-white rounded-lg flex items-center justify-center flex-shrink-0">
3154            <img src="assets/images/imagens-app-personalizacao/sorteios/sorteio-fone-bluetooth-jbl-streaming-jmv-news-jmv-stream-jmv-technology.webp" 
3155                 alt="Fone Bluetooth JBL" 
3156                 class="w-16 h-16 object-cover rounded">
3157        </div>
3158        <div class="flex-1">
3159            <h3 class="text-white font-bold text-[10px] mb-2">Sorteio de um Fone Bluetooth JBL</h3>
3160            <p class="text-white/80 text-[8px] mb-1">de: 05/08/2025 08:00</p>
3161            <p class="text-white/80 text-[8px]">até: 05/12/2025 08:00</p>
3162        </div>
3163    </div>
3164
3165    <!-- Sorteio 2 - Apple Watch Series 9 -->
3166    <div class="rounded-lg p-2 mb-2 flex items-center gap-2 transition-opacity duration-200 hover:opacity-70 cursor-pointer" style="background-color: #7D1B1A;">
3167        <div class="w-16 h-16 bg-white rounded-lg flex items-center justify-center flex-shrink-0">
3168            <img src="assets/images/imagens-app-personalizacao/sorteios/sorteio-apple-watch-series-9-streaming-jmv-news-jmv-stream-jmv-technology.webp" 
3169                 alt="Apple Watch Series 9" 
3170                 class="w-16 h-16 object-cover rounded">
3171        </div>
3172        <div class="flex-1">
3173            <h3 class="text-white font-bold text-[10px] mb-2">Sorteio de um Apple Watch Series 9</h3>
3174            <p class="text-white/80 text-[8px] mb-1">de: 25/08/2025 11:00</p>
3175            <p class="text-white/80 text-[8px]">até: 15/09/2025 11:00</p>
3176        </div>
3177    </div>
3178
3179    <!-- Sorteio 3 - Ingressos Arena Sertaneja -->
3180    <div class="rounded-lg p-2 mb-2 flex items-center gap-2 transition-opacity duration-200 hover:opacity-70 cursor-pointer" style="background-color: #7D1B1A;">
3181        <div class="w-16 h-16 bg-white rounded-lg flex items-center justify-center flex-shrink-0">
3182            <img src="assets/images/imagens-app-personalizacao/sorteios/sorteio-ingressos-show-sertanejo-streaming-jmv-news-jmv-stream-jmv-technology.webp" 
3183                 alt="Arena Sertaneja 2025" 
3184                 class="w-16 h-16 object-cover rounded">
3185        </div>
3186        <div class="flex-1">
3187            <h3 class="text-white font-bold text-[10px] mb-2">Sorteio de 02 Ingressos para a Arena Sertaneja 2025</h3>
3188            <p class="text-white/80 text-[8px] mb-1">de: 25/08/2025 11:00</p>
3189            <p class="text-white/80 text-[8px]">até: 25/11/2025 11:00</p>
3190        </div>
3191    </div>
3192
3193    <!-- Sorteio 4 - Caldas Country -->
3194    <div class="rounded-lg p-2 mb-2 flex items-center gap-2 transition-opacity duration-200 hover:opacity-70 cursor-pointer" style="background-color: #7D1B1A;">
3195        <div class="w-16 h-16 bg-white rounded-lg flex items-center justify-center flex-shrink-0">
3196            <img src="assets/images/imagens-app-personalizacao/sorteios/sorteio-ingressos-caldas-country-festival-2025-streaming-jmv-news-jmv-stream-jmv-technology.webp" 
3197                 alt="Caldas Country 2025" 
3198                 class="w-16 h-16 object-cover rounded">
3199        </div>
3200        <div class="flex-1">
3201            <h3 class="text-white font-bold text-[10px] mb-2">Sorteio de Ingressos – Caldas Country 2025</h3>
3202            <p class="text-white/80 text-[8px] mb-1">de: 28/08/2025 11:00</p>
3203            <p class="text-white/80 text-[8px]">até: 28/10/2025 11:00</p>
3204        </div>
3205    </div>
3206</div>
3207
3208<!-- Pagination -->
3209<div class="bg-black flex justify-center items-center py-4 gap-4">
3210    <i class="fas fa-chevron-left text-white text-lg transition-opacity duration-200 hover:opacity-70 cursor-pointer"></i>
3211    <span class="text-white font-bold text-lg">1</span>
3212    <i class="fas fa-chevron-right text-white text-lg transition-opacity duration-200 hover:opacity-70 cursor-pointer"></i>
3213</div>
3214
3215<!-- Bottom Navigation -->
3216<div class="absolute bottom-0 left-0 right-0 px-4 py-2" style="background-color: #7D1B1A;">
3217    <div class="flex justify-around items-center">
3218        <button data-nav="home" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70">
3219            <i class="fas fa-home text-sm mb-1"></i>
3220        </button>
3221        <button data-nav="pedido" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70">
3222            <i class="fas fa-radio text-sm mb-1"></i>
3223        </button>
3224        <button data-nav="sorteios" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70">
3225            <i class="fas fa-gift text-sm mb-1"></i>
3226        </button>
3227        <button data-nav="spotify" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70">
3228            <i class="fas fa-music text-sm mb-1"></i>
3229        </button>
3230        <button data-nav="videos" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70">
3231            <i class="fas fa-play text-sm mb-1"></i>
3232        </button>
3233    </div>
3234    <!-- Home Indicator -->
3235    <div class="flex justify-center mt-2">
3236        <div class="w-32 h-1 bg-white/30 rounded-full"></div>
3237    </div>
3238</div>                                </div>
3239                                
3240                                <!-- Página Spotify (oculta inicialmente) -->
3241                                <div id="page-spotify" class="app-page hidden" role="tabpanel" aria-labelledby="nav-spotify">
3242                                    <!-- Status Bar -->
3243<div class="px-4 py-1 flex justify-between items-center text-white text-xs" style="background-color: #7D1B1A;">
3244    <span>10:23</span>
3245    <div class="flex items-center gap-1">
3246        <i class="fas fa-signal text-xs"></i>
3247        <i class="fas fa-wifi text-xs"></i>
3248        <div class="bg-white text-black px-1 rounded text-[10px] font-bold">86</div>
3249    </div>
3250</div>
3251
3252<!-- Header -->
3253<div class="px-4 py-3 flex items-center" style="background-color: #7D1B1A;">
3254    <div class="flex-1 flex justify-center">
3255        <img src="assets/images/logo-jmv-news-logomarca-oficial-app-para-radios-tv-streaming-jmv-technology.webp" 
3256             alt="JMV News Logo" 
3257             class="h-4 object-contain">
3258    </div>
3259    <div class="w-4 h-4 bg-white rounded-full flex items-center justify-center">
3260        <i class="fas fa-user text-black text-[8px]"></i>
3261    </div>
3262</div>
3263
3264<!-- Search Section -->
3265<div class="bg-black px-4 py-4 flex items-center gap-4">
3266    <h1 class="text-white font-bold text-lg flex-1">Artistas</h1>
3267    <div class="w-10 h-10 rounded-lg flex items-center justify-center" style="background-color: #7D1B1A;">
3268        <i class="fas fa-search text-white text-sm"></i>
3269    </div>
3270</div>
3271
3272<!-- Content Area -->
3273<div class="bg-black flex-1 px-4 py-4 overflow-y-auto pb-24">
3274    <!-- Artists Grid -->
3275    <div class="grid grid-cols-2 gap-2">
3276        <!-- Gusttavo Lima -->
3277        <div class="flex flex-col items-center transition-opacity duration-200 hover:opacity-70 cursor-pointer">
3278            <div class="w-24 h-24 rounded-full overflow-hidden mb-2">
3279                <img src="assets/images/imagens-app-personalizacao/spotify/gusttavo-lima-buteco-in-boston-streaming-jmv-news-jmv-stream-jmv-technology.webp"
3280                     alt="Gusttavo Lima"
3281                     class="w-full h-full object-cover">
3282            </div>
3283            <p class="text-white text-[9px] font-medium text-center">Gusttavo Lima</p>
3284        </div>
3285
3286        <!-- César Menotti & Fabiano -->
3287        <div class="flex flex-col items-center transition-opacity duration-200 hover:opacity-70 cursor-pointer">
3288            <div class="w-24 h-24 rounded-full overflow-hidden mb-2">
3289                <img src="assets/images/imagens-app-personalizacao/spotify/cesar-menotti-e-fabiano-intensidade-streaming-jmv-news-jmv-stream-jmv-technology.webp"
3290                     alt="César Menotti & Fabiano"
3291                     class="w-full h-full object-cover">
3292            </div>
3293            <p class="text-white text-[9px] font-medium text-center">César Menotti & Fabia...</p>
3294        </div>
3295
3296        <!-- Jorge & Mateus -->
3297        <div class="flex flex-col items-center transition-opacity duration-200 hover:opacity-70 cursor-pointer">
3298            <div class="w-24 h-24 rounded-full overflow-hidden mb-2">
3299                <img src="assets/images/imagens-app-personalizacao/spotify/jorge-e-mateus-tudo-em-paz-streaming-jmv-news-jmv-stream-jmv-technology.webp"
3300                     alt="Jorge & Mateus"
3301                     class="w-full h-full object-cover">
3302            </div>
3303            <p class="text-white text-[9px] font-medium text-center">Jorge & Mateus</p>
3304        </div>
3305
3306        <!-- Bruno & Marrone -->
3307        <div class="flex flex-col items-center transition-opacity duration-200 hover:opacity-70 cursor-pointer">
3308            <div class="w-24 h-24 rounded-full overflow-hidden mb-2">
3309                <img src="assets/images/imagens-app-personalizacao/spotify/bruno-e-marrone-sertanejo-ao-vivo-streaming-jmv-news-jmv-stream-jmv-technology.webp"
3310                     alt="Bruno & Marrone"
3311                     class="w-full h-full object-cover">
3312            </div>
3313            <p class="text-white text-[9px] font-medium text-center">Bruno & Marrone</p>
3314        </div>
3315
3316        <!-- Fernando & Sorocaba -->
3317        <div class="flex flex-col items-center transition-opacity duration-200 hover:opacity-70 cursor-pointer">
3318            <div class="w-24 h-24 rounded-full overflow-hidden mb-2">
3319                <img src="assets/images/imagens-app-personalizacao/spotify/fernando-e-sorocaba-ao-vivo-streaming-jmv-news-jmv-stream-jmv-technology.webp"
3320                     alt="Fernando & Sorocaba"
3321                     class="w-full h-full object-cover">
3322            </div>
3323            <p class="text-white text-[9px] font-medium text-center">Fernando & Sorocaba</p>
3324        </div>
3325
3326        <!-- Henrique & Juliano -->
3327        <div class="flex flex-col items-center transition-opacity duration-200 hover:opacity-70 cursor-pointer">
3328            <div class="w-24 h-24 rounded-full overflow-hidden mb-2">
3329                <img src="assets/images/imagens-app-personalizacao/spotify/henrique-e-juliano-rancorosa-streaming-jmv-news-jmv-stream-jmv-technology.webp"
3330                     alt="Henrique & Juliano"
3331                     class="w-full h-full object-cover">
3332            </div>
3333            <p class="text-white text-[9px] font-medium text-center">Henrique & Juliano</p>
3334        </div>
3335    </div>
3336</div>
3337
3338<!-- Bottom Navigation -->
3339<div class="absolute bottom-0 left-0 right-0 px-4 py-2" style="background-color: #7D1B1A;">
3340    <div class="flex justify-around items-center">
3341        <button data-nav="home" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70">
3342            <i class="fas fa-home text-sm mb-1"></i>
3343        </button>
3344        <button data-nav="pedido" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70">
3345            <i class="fas fa-radio text-sm mb-1"></i>
3346        </button>
3347        <button data-nav="sorteios" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70">
3348            <i class="fas fa-gift text-sm mb-1"></i>
3349        </button>
3350        <button data-nav="spotify" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70">
3351            <i class="fas fa-music text-sm mb-1"></i>
3352        </button>
3353        <button data-nav="videos" class="text-white flex flex-col items-center transition-opacity duration-200 hover:opacity-70">
3354            <i class="fas fa-play text-sm mb-1"></i>
3355        </button>
3356    </div>
3357    <!-- Home Indicator -->
3358    <div class="flex justify-center mt-2">
3359        <div class="w-32 h-1 bg-white/30 rounded-full"></div>
3360    </div>
3361</div>                                </div>
3362                            </div>
3363                        </div>
3364                        
3365                        <!-- Side buttons -->
3366                        <div class="absolute -left-[6px] top-20 w-[6px] h-8 bg-gray-600 rounded-l-sm" aria-hidden="true"></div>
3367                        <div class="absolute -left-[6px] top-32 w-[6px] h-12 bg-gray-600 rounded-l-sm" aria-hidden="true"></div>
3368                        <div class="absolute -left-[6px] top-48 w-[6px] h-12 bg-gray-600 rounded-l-sm" aria-hidden="true"></div>
3369                        <div class="absolute -right-[6px] top-28 w-[6px] h-16 bg-gray-600 rounded-r-sm" aria-hidden="true"></div>
3370                    </div>
3371                </div>
3372            </div>
3373
3374            <!-- Conteúdo de Personalização -->
3375            <div class="text-white">
3376                <h2 id="personalizacao-title" class="text-3xl md:text-4xl font-bold mb-4">
3377                    Personalize como quiser
3378                </h2>
3379                <p class="text-gray-300 mb-8">
3380                    A cara da sua rádio, no app totalmente seu.
3381                </p>
3382                
3383                <!-- Controles de Personalização -->
3384                <div class="grid md:grid-cols-2 gap-6 mb-8" role="region" aria-label="Controles de personalização">
3385                    <!-- Seletor de Cor -->
3386                    <div class="bg-gray-800 rounded-lg p-6">
3387                        <h3 class="text-xl font-bold mb-4 flex items-center gap-2">
3388                            <i class="fas fa-palette" aria-hidden="true"></i>
3389                            Escolha sua Cor
3390                        </h3>
3391                        <p class="text-gray-300 text-sm mb-4">
3392                            Personalize a cor principal do seu app
3393                        </p>
3394                        <div class="flex items-center gap-4">
3395                            <label for="colorPicker" class="sr-only">Seletor de cor do aplicativo</label>
3396                            <input type="color" 
3397                                   id="colorPicker" 
3398                                   value="#7D1B1A" 
3399                                   class="w-16 h-16 rounded-lg border-2 border-gray-600 cursor-pointer"
3400                                   aria-describedby="colorHex"
3401                                   title="Escolha a cor principal do aplicativo">
3402                            <div>
3403                                <div class="text-sm font-medium mb-1">Cor Atual:</div>
3404                                <div id="colorHex" class="text-xs text-gray-400 font-mono" aria-l
3404ive="polite">#7D1B1A</div>
3405                            </div>
3406                        </div>
3407                        <button id="resetColor" 
3408                                class="mt-4 px-4 py-2 bg-gray-600 text-white rounded-lg text-sm hover:bg-gray-500 transition-colors"
3409                                title="Restaurar cor padrão do aplicativo"
3410                                aria-label="Restaurar cor original">
3411                            Restaurar Cor Original
3412                        </button>
3413                    </div>
3414                    
3415                    <!-- Upload de Logo -->
3416                    <div class="bg-gray-800 rounded-lg p-6">
3417                        <h3 class="text-xl font-bold mb-4 flex items-center gap-2">
3418                            <i class="fas fa-image" aria-hidden="true"></i>
3419                            Sua Logo
3420                        </h3>
3421                        <p class="text-gray-300 text-sm mb-4">
3422                            Envie seu logo (PNG, JPG - max 2MB)
3423                        </p>
3424                        <div class="space-y-4">
3425                            <label for="logoUpload" class="sr-only">Enviar logo personalizada</label>
3426                            <input type="file" 
3427                                   id="logoUpload" 
3428                                   accept="image/png,image/jpg,image/jpeg" 
3429                                   class="w-full text-sm text-gray-300 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-blue-600 file:text-white hover:file:bg-blue-700 file:cursor-pointer"
3430                                   aria-describedby="logo-help"
3431                                   title="Selecione um arquivo de imagem para logo">
3432                            <div id="logo-help" class="sr-only">Formatos aceitos: PNG, JPG, JPEG. Tamanho máximo: 2MB</div>
3433                            <div class="flex gap-2" role="group" aria-label="Ações da logo">
3434                                <button id="previewLogo" 
3435                                        class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700 transition-colors"
3436                                        title="Aplicar logo selecionada no aplicativo"
3437                                        aria-label="Aplicar logo ao aplicativo">
3438                                    Aplicar Logo
3439                                </button>
3440                                <button id="resetLogo" 
3441                                        class="px-4 py-2 bg-gray-600 text-white rounded-lg text-sm hover:bg-gray-500 transition-colors"
3442                                        title="Restaurar logo padrão"
3443                                        aria-label="Restaurar logo original">
3444                                    Logo Original
3445                                </button>
3446                            </div>
3447                        </div>
3448                    </div>
3449                </div>
3450
3451                
3452                <!-- Navegação -->
3453                <div role="region" aria-labelledby="nav-title">
3454                    <h3 id="nav-title" class="text-white font-semibold mb-4">
3455                        Veja cada página clicando no botão abaixo:
3456                    </h3>
3457                    <div class="flex flex-wrap gap-3 mb-6" role="tablist" aria-label="Páginas do aplicativo">
3458                        <button id="nav-inicio" 
3459                                class="bg-white text-black px-4 py-2 rounded-full text-sm font-semibold hover:bg-gray-200 transition-colors flex items-center gap-2"
3460                                role="tab" 
3461                                aria-selected="true"
3462                                aria-controls="page-inicio"
3463                                title="Visualizar página inicial do aplicativo">
3464                            <i class="fas fa-home text-xs" aria-hidden="true"></i>
3465                            Início
3466                        </button>
3467                        <button id="nav-contato" 
3468                                class="bg-transparent border border-white text-white px-4 py-2 rounded-full text-sm font-semibold hover:bg-white hover:text-black transition-colors flex items-center gap-2"
3469                                role="tab" 
3470                                aria-selected="false"
3471                                aria-controls="page-contato"
3472                                title="Visualizar página de contato">
3473                            <i class="fas fa-phone text-xs" aria-hidden="true"></i>
3474                            Contato
3475                        </button>
3476                        <button id="nav-videos" 
3477                                class="bg-transparent border border-white text-white px-4 py-2 rounded-full text-sm font-semibold hover:bg-white hover:text-black transition-colors flex items-center gap-2"
3478                                role="tab" 
3479                                aria-selected="false"
3480                                aria-controls="page-videos"
3481                                title="Visualizar página de transmissão ao vivo">
3482                            <i class="fas fa-play text-xs" aria-hidden="true"></i>
3483                            Ao Vivo
3484                        </button>
3485                        <button id="nav-programacao" 
3486                                class="bg-transparent border border-white text-white px-4 py-2 rounded-full text-sm font-semibold hover:bg-white hover:text-black transition-colors flex items-center gap-2"
3487                                role="tab" 
3488                                aria-selected="false"
3489                                aria-controls="page-programacao"
3490                                title="Visualizar programação da rádio">
3491                            <i class="fas fa-calendar text-xs" aria-hidden="true"></i>
3492                            Programação
3493                        </button>
3494                        <button id="nav-top10" 
3495                                class="bg-transparent border border-white text-white px-4 py-2 rounded-full text-sm font-semibold hover:bg-white hover:text-black transition-colors flex items-center gap-2"
3496                                role="tab" 
3497                                aria-selected="false"
3498                                aria-controls="page-top10"
3499                                title="Visualizar top 10 das músicas">
3500                            <i class="fas fa-list-ol text-xs" aria-hidden="true"></i>
3501                            Top 10
3502                        </button>
3503                        <button id="nav-pedido" 
3504                                class="bg-transparent border border-white text-white px-4 py-2 rounded-full text-sm font-semibold hover:bg-white hover:text-black transition-colors flex items-center gap-2"
3505                                role="tab" 
3506                                aria-selected="false"
3507                                aria-controls="page-pedido"
3508                                title="Visualizar página de pedidos musicais">
3509                            <i class="fas fa-radio text-xs" aria-hidden="true"></i>
3510                            Pedido
3511                        </button>
3512                        <button id="nav-sorteios" 
3513                                class="bg-transparent border border-white text-white px-4 py-2 rounded-full text-sm font-semibold hover:bg-white hover:text-black transition-colors flex items-center gap-2"
3514                                role="tab" 
3515                                aria-selected="false"
3516                                aria-controls="page-sorteios"
3517                                title="Visualizar página de sorteios">
3518                            <i class="fas fa-gift text-xs" aria-hidden="true"></i>
3519                            Sorteios
3520                        </button>
3521                        <button id="nav-spotify" 
3522                                class="bg-transparent border border-white text-white px-4 py-2 rounded-full text-sm font-semibold hover:bg-white hover:text-black transition-colors flex items-center gap-2"
3523                                role="tab" 
3524                                aria-selected="false"
3525                                aria-controls="page-spotify"
3526                                title="Visualizar integração com Spotify">
3527                            <i class="fas fa-music text-xs" aria-hidden="true"></i>
3528                            Spotify
3529                        </button>
3530                    </div>
3531                    
3532                    <!-- Botão CTA -->
3533                    <div class="text-center">
3534                        <a href="#contato-jmv-news-ecossistema-crossmedia" 
3535                           class="inline-flex items-center bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-lg transition-all duration-300 transform hover:scale-105 shadow-lg hover-reflect"
3536                           title="Entre em contato com nossos especialistas"
3537                           aria-label="Falar com especialista sobre o aplicativo">
3538                            <i class="fas fa-comments mr-2" aria-hidden="true"></i>
3539                            Falar com um Especialista
3540                        </a>
3541                    </div>
3542                </div>
3543            </div>
3544        </div>
3545    </div>
3546</section>
3547                       
3548
3549<style>
3550    /* Color Picker Styling */
3551    #colorPicker {
3552        -webkit-appearance: none;
3553        -moz-appearance: none;
3554        appearance: none;
3555        background: none;
3556        border: 2px solid #4B5563;
3557        cursor: pointer;
3558        transition: all 0.3s ease;
3559    }
3560    
3561    #colorPicker::-webkit-color-swatch {
3562        border-radius: 8px;
3563        border: none;
3564    }
3565    
3566    #colorPicker::-moz-color-swatch {
3567        border-radius: 8px;
3568        border: none;
3569    }
3570    
3571    #colorPicker:hover {
3572        border-color: #9CA3AF;
3573        transform: scale(1.05);
3574    }
3575    
3576    /* Logo Upload Styling */
3577    #logoUpload::-webkit-file-upload-button {
3578        background: #2563EB;
3579        color: white;
3580        border: none;
3581        border-radius: 8px;
3582        padding: 8px 16px;
3583        cursor: pointer;
3584        font-size: 14px;
3585        font-weight: 600;
3586        transition: background 0.3s ease;
3587    }
3588    
3589    #logoUpload::-webkit-file-upload-button:hover {
3590        background: #1D4ED8;
3591    }
3592    
3593    /* Garantir tamanho adequado das logos no app mockup */
3594    #app-content img[alt*="JMV News Logo"],
3595    #app-content img[alt*="JMV News"],
3596    #app-content img[src*="logo-jmv-news"] {
3597        max-width: 120px !important;
3598        max-height: 32px !important;
3599        width: auto !important;
3600        height: auto !important;
3601        object-fit: contain !important;
3602        object-position: center !important;
3603    }
3604    
3605    /* Logo rotativa no quadrado branco - tamanho máximo 32px (8 * 4px) */
3606    #app-content .animate-spin-slow {
3607        max-width: 32px !important;
3608        max-height: 32px !important;
3609        width: auto !important;
3610        height: auto !important;
3611        object-fit: contain !important;
3612        object-position: center !important;
3613    }
3614    
3615    /* Regra ainda mais específica para garantir o tamanho */
3616    #app-content .logo-rotativa-fixa,
3617    #app-content img.logo-rotativa-fixa {
3618        max-width: 32px !important;
3619        max-height: 32px !important;
3620        width: auto !important;
3621        height: auto !important;
3622        object-fit: contain !important;
3623    }
3624    
3625    .swiper-pagination-banner {
3626        bottom: 8px !important;
3627        left: 50% !important;
3628        transform: translateX(-50%) !important;
3629        width: auto !important;
3630    }
3631    
3632    .swiper-pagination-banner .swiper-pagination-bullet {
3633        background: rgba(255, 255, 255, 0.6) !important;
3634        width: 6px !important;
3635        height: 6px !important;
3636        margin: 0 2px !important;
3637    }
3638    
3639    .swiper-pagination-banner .swiper-pagination-bullet-active {
3640        background: white !important;
3641        transform: scale(1.2) !important;
3642    }
3643
3644    /* Estilos para navegação SPA */
3645    .app-page {
3646        width: 100%;
3647        height: 100%;
3648        position: absolute;
3649        top: 0;
3650        left: 0;
3651        transition: all 0.3s ease-in-out;
3652    }
3653    
3654    .app-page.hidden {
3655        opacity: 0;
3656        transform: translateX(100%);
3657        pointer-events: none;
3658    }
3659    
3660    .app-page.active {
3661        opacity: 1;
3662        transform: translateX(0);
3663        pointer-events: auto;
3664    }
3665
3666    /* Esconder scrollbar em todos os elementos */
3667    * {
3668        scrollbar-width: none; /* Firefox */
3669        -ms-overflow-style: none; /* Internet Explorer 10+ */
3670    }
3671
3672    *::-webkit-scrollbar {
3673        width: 0px;
3674        background: transparent; /* Chrome/Safari/Webkit */
3675    }
3676
3677    *::-webkit-scrollbar-thumb {
3678        background: transparent;
3679    }
3680
3681    /* Garantir que o scroll funcione mas seja invisível */
3682    .overflow-y-auto {
3683        scrollbar-width: none;
3684        -ms-overflow-style: none;
3685    }
3686
3687    .overflow-y-auto::-webkit-scrollbar {
3688        display: none;
3689    }
3690</style>
3691
3692<script>
3693    document.addEventListener('DOMContentLoaded', function () {
3694        // Banner Swiper
3695        const bannerSwiper = new Swiper('.bannerSwiper', {
3696            loop: true,
3697            autoplay: {
3698                delay: 3000,
3699                disableOnInteraction: false,
3700            },
3701            effect: 'slide',
3702            speed: 500,
3703            pagination: {
3704                el: '.swiper-pagination-banner',
3705                clickable: true,
3706            },
3707        });
3708
3709        // Sistema de Navegação SPA
3710        window.AppNavigation = {
3711            currentPage: 'inicio',
3712            
3713            // Navegar para uma página
3714            navigateTo: function(pageId) {
3715                // Ocultar página atual
3716                const currentPageElement = document.getElementById(`page-${this.currentPage}`);
3717                if (currentPageElement) {
3718                    currentPageElement.classList.remove('active');
3719                    currentPageElement.classList.add('hidden');
3720                }
3721                
3722                // Mostrar nova página
3723                const newPageElement = document.getElementById(`page-${pageId}`);
3724                if (newPageElement) {
3725                    newPageElement.classList.remove('hidden');
3726                    newPageElement.classList.add('active');
3727                    this.currentPage = pageId;
3728                }
3729            },
3730
3731            // Voltar para página anterior (por enquanto só volta para início)
3732            goBack: function() {
3733                this.navigateTo('inicio');
3734            }
3735        };
3736
3737        // Event listeners para botões de navegação
3738        document.addEventListener('click', function(e) {
3739            // Debug - verificar cliques
3740            console.log('Clique detectado:', e.target);
3741            
3742            // Botão Contato
3743            if (e.target.closest('[data-nav="contato"]')) {
3744                e.preventDefault();
3745                console.log('Navegando para contato');
3746                AppNavigation.navigateTo('contato');
3747            }
3748            
3749            // Botão Vídeos
3750            if (e.target.closest('[data-nav="videos"]')) {
3751                e.preventDefault();
3752                console.log('Navegando para videos');
3753                AppNavigation.navigateTo('videos');
3754            }
3755            
3756            // Botão Programação
3757            if (e.target.closest('[data-nav="programacao"]')) {
3758                e.preventDefault();
3759                console.log('Navegando para programacao');
3760                AppNavigation.navigateTo('programacao');
3761            }
3762            
3763            // Botão Spotify (Nota Musical)
3764            if (e.target.closest('[data-nav="spotify"]')) {
3765                e.preventDefault();
3766                console.log('Navegando para spotify');
3767                AppNavigation.navigateTo('spotify');
3768            }
3769            
3770            // Botão Top 10
3771            if (e.target.closest('[data-nav="top10"]')) {
3772                e.preventDefault();
3773                console.log('Navegando para top10');
3774                AppNavigation.navigateTo('top10');
3775            }
3776            
3777            // Botão Pedido (Rádio)
3778            if (e.target.closest('[data-nav="pedido"]')) {
3779                e.preventDefault();
3780                console.log('Navegando para pedido');
3781                AppNavigation.navigateTo('pedido');
3782            }
3783            
3784            // Botão Sorteios (Presente)
3785            if (e.target.closest('[data-nav="sorteios"]')) {
3786                e.preventDefault();
3787                console.log('Navegando para sorteios');
3788                AppNavigation.navigateTo('sorteios');
3789            }
3790            
3791            // Botão Home (voltar)
3792            if (e.target.closest('[data-nav="home"]')) {
3793                e.preventDefault();
3794                console.log('Navegando para inicio');
3795                AppNavigation.navigateTo('inicio');
3796            }
3797            
3798            // Botão Início
3799            if (e.target.closest('[data-nav="inicio"]')) {
3800                e.preventDefault();
3801                console.log('Navegando para inicio');
3802                AppNavigation.navigateTo('inicio');
3803            }
3804            
3805            // Seta de voltar
3806            if (e.target.closest('.back-button')) {
3807                e.preventDefault();
3808                console.log('Voltando');
3809                AppNavigation.goBack();
3810            }
3811        });
3812        
3813        // Sistema de Personalização
3814        const PersonalizationSystem = {
3815            originalColor: '#7D1B1A',
3816            originalLogo: 'assets/images/logo-jmv-news-logomarca-oficial-app-para-radios-tv-streaming-jmv-technology.webp',
3817            currentColor: '#7D1B1A', // Rastrear cor atual
3818            targetElements: [], // Cache dos elementos que devem ter cor personalizada
3819            
3820            // Inicializar e mapear elementos que devem ter cor personalizada
3821            init: function() {
3822                const phoneContainer = document.querySelector('#a
3822pp-content');
3823                if (!phoneContainer) {
3824                    console.warn('Container do smartphone não encontrado');
3825                    return;
3826                }
3827                
3828                // Encontrar e marcar todos os elementos que têm a cor original
3829                const elementsWithOriginalColor = phoneContainer.querySelectorAll('[style*="background-color: #7D1B1A"], [style*="background-color:#7D1B1A"], [style*="background-color: rgb(125, 27, 26)"]');
3830                //console.log('Elementos encontrados:', elementsWithOriginalColor);
3831                // Marcar elementos para fácil identificação posterior
3832                elementsWithOriginalColor.forEach(element => {
3833                    element.setAttribute('data-customizable', 'true');
3834                    this.targetElements.push(element);
3835                });
3836                
3837                console.log('Elementos personalizáveis encontrados:', this.targetElements.length);
3838            },
3839            
3840            // Aplicar cor personalizada APENAS no mockup do celular
3841            applyCustomColor: function(newColor) {
3842                const phoneContainer = document.querySelector('#app-content');
3843                if (!phoneContainer) {
3844                    console.warn('Container do smartphone não encontrado');
3845                    return;
3846                }
3847                
3848                // Buscar TODOS os elementos marcados como personalizáveis
3849                const elementsToUpdate = phoneContainer.querySelectorAll('[data-customizable="true"]');
3850                
3851                elementsToUpdate.forEach(element => {
3852                    // Simplesmente definir a nova cor, independente da cor atual
3853                    const currentStyle = element.getAttribute('style') || '';
3854                    
3855                    // Remover qualquer background-color existente e adicionar o novo
3856                    let newStyle = currentStyle.replace(/background-color:\s*[^;]+;?/gi, '');
3857                    newStyle += `background-color: ${newColor};`;
3858                    
3859                    element.setAttribute('style', newStyle);
3860                });
3861                
3862                // Atualizar cor atual
3863                this.currentColor = newColor;
3864                
3865                console.log('Cor aplicada no mockup:', newColor, 'em', elementsToUpdate.length, 'elementos');
3866            },
3867            
3868            // Aplicar logo personalizada APENAS no mockup
3869            applyCustomLogo: function(logoSrc) {
3870                const phoneContainer = document.querySelector('#app-content');
3871                if (!phoneContainer) {
3872                    console.warn('Container do smartphone não encontrado');
3873                    return;
3874                }
3875                
3876                // Buscar logos apenas dentro do mockup
3877                const logoElements = phoneContainer.querySelectorAll('img[alt*="JMV News Logo"], img[alt*="JMV News"], img[src*="logo-jmv-news"]');
3878                
3879                logoElements.forEach(img => {
3880                    img.src = logoSrc;
3881                    // Garantir tamanho adequado da logo
3882                    img.style.maxWidth = '120px';
3883                    img.style.maxHeight = '32px';
3884                    img.style.width = 'auto';
3885                    img.style.height = 'auto';
3886                    img.style.objectFit = 'contain';
3887                    img.style.objectPosition = 'center';
3888                });
3889                
3890                console.log('Logo aplicada no mockup com dimensões otimizadas:', logoSrc);
3891            },
3892            
3893            // Restaurar configurações originais
3894            resetToOriginal: function() {
3895                this.applyCustomColor(this.originalColor);
3896                this.applyCustomLogo(this.originalLogo);
3897                this.currentColor = this.originalColor;
3898                
3899                // Resetar controles
3900                const colorPicker = document.getElementById('colorPicker');
3901                const colorHex = document.getElementById('colorHex');
3902                const logoUpload = document.getElementById('logoUpload');
3903                
3904                if (colorPicker) colorPicker.value = this.originalColor;
3905                if (colorHex) colorHex.textContent = this.originalColor;
3906                if (logoUpload) logoUpload.value = '';
3907                
3908                console.log('Configurações restauradas para cor original:', this.originalColor);
3909            }
3910        };
3911        
3912        // Inicializar sistema quando a página carrega
3913        PersonalizationSystem.init();
3914        
3915        // Event Listeners para Personalização
3916        
3917        // Seletor de Cor
3918        const colorPicker = document.getElementById('colorPicker');
3919        const colorHex = document.getElementById('colorHex');
3920        
3921        if (colorPicker && colorHex) {
3922            colorPicker.addEventListener('input', function() {
3923                const newColor = this.value;
3924                colorHex.textContent = newColor;
3925                PersonalizationSystem.applyCustomColor(newColor);
3926            });
3927        }
3928        
3929        // Reset de Cor
3930        const resetColorBtn = document.getElementById('resetColor');
3931        if (resetColorBtn) {
3932            resetColorBtn.addEventListener('click', function() {
3933                PersonalizationSystem.resetToOriginal();
3934            });
3935        }
3936        
3937        // Upload de Logo
3938        const logoUpload = document.getElementById('logoUpload');
3939        const previewLogoBtn = document.getElementById('previewLogo');
3940        const resetLogoBtn = document.getElementById('resetLogo');
3941        
3942        if (previewLogoBtn && logoUpload) {
3943            previewLogoBtn.addEventListener('click', function() {
3944                const file = logoUpload.files[0];
3945                if (file) {
3946                    // Verificar tamanho do arquivo (max 2MB)
3947                    if (file.size > 2 * 1024 * 1024) {
3948                        alert('Arquivo muito grande! Máximo 2MB.');
3949                        return;
3950                    }
3951                    
3952                    // Criar URL do arquivo para preview
3953                    const reader = new FileReader();
3954                    reader.onload = function(e) {
3955                        PersonalizationSystem.applyCustomLogo(e.target.result);
3956                    };
3957                    reader.readAsDataURL(file);
3958                } else {
3959                    alert('Selecione um arquivo primeiro!');
3960                }
3961            });
3962        }
3963        
3964        // Reset de Logo
3965        if (resetLogoBtn && logoUpload) {
3966            resetLogoBtn.addEventListener('click', function() {
3967                PersonalizationSystem.applyCustomLogo(PersonalizationSystem.originalLogo);
3968                logoUpload.value = '';
3969            });
3970        }
3971        
3972        // Event Listeners para Botões de Navegação do Mockup
3973        const navigationButtons = {
3974            'nav-inicio': 'inicio',
3975            'nav-contato': 'contato', 
3976            'nav-videos': 'videos',
3977            'nav-programacao': 'programacao',
3978            'nav-top10': 'top10',
3979            'nav-pedido': 'pedido',
3980            'nav-sorteios': 'sorteios',
3981            'nav-spotify': 'spotify'
3982        };
3983        
3984        // Adicionar event listeners para cada botão
3985        Object.keys(navigationButtons).forEach(buttonId => {
3986            const button = document.getElementById(buttonId);
3987            const pageId = navigationButtons[buttonId];
3988            
3989            if (button) {
3990                button.addEventListener('click', function() {
3991                    // Remover classe ativa de todos os botões
3992                    Object.keys(navigationButtons).forEach(id => {
3993                        const btn = document.getElementById(id);
3994                        if (btn) {
3995                            btn.classList.remove('bg-white', 'text-black');
3996                            btn.classList.add('bg-transparent', 'border', 'border-white', 'text-white');
3997                        }
3998                    });
3999                    
4000                    // Adicionar classe ativa ao botão clicado
4001                    this.classList.remove('bg-transparent', 'border', 'border-white', 'text-white');
4002                    this.classList.add('bg-white', 'text-black');
4003                    
4004                    // Navegar para a página no mockup
4005                    console.log('Navegando para:', pageId);
4006                    AppNavigation.navigateTo(pageId);
4007                });
4008            }
4009        });
4010        
4011    });
4012</script>
4012<section class="py-16 bg-gray-50" aria-labelledby="integracao-site-title">
4013  <div class="container mx-auto px-4 lg:px-8">
4014    <div class="grid items-center gap-10 lg:grid-cols-2">
4015      <!-- Imagem -->
4016      <div class="relative hover-reflect" role="img" aria-label="Demonstração da integração entre aplicativo e site">
4017        <img src="assets/images/mockup-app-site-jmv-news-integracao-radio-tv-streaming-web-noticias-jmv-technology.webp"
4018             alt="Mockup mostrando aplicativo Cross Media e site JMV News com integração completa entre rádio, TV, streaming e portal de notícias"
4019             class="w-full h-auto rounded-2xl shadow-lg"
4020             loading="lazy"
4021             width="600"
4022             height="400" />
4023      </div>
4024
4025      <!-- Texto -->
4026      <article>
4027        <div class="mb-4">
4028          <span class="inline-block text-sm font-semibold text-blue-600 uppercase tracking-wide bg-white px-3 py-1 rounded-full border border-blue-200 shadow-sm"
4029                role="note"
4030                aria-label="Recurso destacado">
4031            <abbr title="Inteligência Artificial">COM TECNOLOGIA DE I.A</abbr>
4032          </span>
4033        </div>
4034
4035        <h2 id="integracao-site-title" class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">
4036          Integração Cross Media Completa
4037        </h2>
4038        <div class="text-gray-700 mb-6 leading-relaxed max-w-xl space-y-4">
4039          <p>
4040            Seu aplicativo integrado com seu próprio <strong class="text-gray-900">site</strong> — é uma solução Cross Media que amplia alcance e engajamento.
4041          </p>
4042          <p>
4043            Publique conteúdos, organize programação e mantenha sua audiência sempre informada.
4044          </p>
4045          <p>
4046            O site pode ainda incluir <strong class="text-gray-900">notícias diárias automáticas geradas por <abbr title="Inteligência Artificial">IA</abbr></strong>, ampliando o alcance da sua marca sem esforço extra.
4047          </p>
4048        </div>
4049
4050        <div>
4051          <a href="https://jmvnews.com/"
4052             class="inline-flex items-center justify-center rounded-full bg-red-600 px-6 py-3 text-white font-semibold shadow-sm hover:bg-red-700 transition focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 hover-reflect"
4053             aria-label="Conhecer o site-modelo com integração completa"
4054             title="Visualizar exemplo de site integrado ao aplicativo">
4055            <i class="fas fa-globe mr-3" aria-hidden="true"></i>
4056            Conhecer o Site-Modelo
4057          </a>
4058        </div>
4059      </article>
4060    </div>
4061  </div>
4062</section><section class="py-24 px-4 bg-black" aria-labelledby="cases-sucesso-title">
4063    <div class="max-w-6xl mx-auto">
4064        <!-- Título centralizado -->
4065        <h2 id="cases-sucesso-title" class="text-3xl md:text-4xl lg:text-5xl font-bold text-white text-center mb-16">
4066            Cases de Sucesso
4067        </h2>
4068
4069        <div class="grid lg:grid-cols-2 items-center gap-12">
4070            <!-- Player de vídeo -->
4071            <div class="relative" role="region" aria-label="Vídeo demonstrativo da Univale TV">
4072                <div class="w-full max-w-sm mx-auto">
4073                    <div class="relative rounded-xl overflow-hidden shadow-xl bg-black">
4074                        <iframe
4075                            src="https://player.jmvstream.com/GABVbodAEtgzfslejLJCLmCTkVmc4I/32l5pw3v2111202"
4076                            allow="autoplay; fullscreen;"
4077                            allowfullscreen
4078                            class="w-full h-[500px] md:h-[600px] border-0"
4079                            title="Vídeo demonstrativo dos serviços de streaming e tecnologia da JMV Technology para Univale TV"
4080                            tabindex="0"
4081                            frameborder="0"
4082                            aria-label="Player de vídeo mostrando case de sucesso da Univale TV"
4083                            width="400"
4084                            height="600">
4085                        </iframe>
4086                    </div>
4087                </div>
4088            </div>
4089
4090            <!-- Conteúdo do depoimento -->
4091            <article class="bg-white rounded-2xl p-8 shadow-xl" role="complementary">
4092                <!-- Logo da Univale TV -->
4093                <div class="flex justify-center mb-6">
4094                    <img src="assets/images/logo-univale-tv-logomarca-oficial-canal-universitario-tv-educativa-streaming-jmv-technology.webp"
4095                         alt="Logomarca oficial da Univale TV - Canal Universitário de TV Educativa"
4096                         class="h-16 md:h-20 w-auto object-contain"
4097                         loading="lazy"
4098                         width="120"
4099                         height="80">
4100                </div>
4101
4102                <h3 class="text-xl font-bold text-gray-900 mb-6 text-center">
4103                    <abbr title="Universidade Vale do Rio Doce">Univale</abbr> TV - <span class="text-sm font-normal">FUNDAÇÃO PERCIVAL FARQUHAR</span>
4104                </h3>
4105
4106                <div class="rounded-lg p-6 mb-6">
4107                    <p class="text-gray-700 mb-4 text-justify leading-relaxed">
4108                        A Univale TV é o canal universitário da <strong>Universidade Vale do Rio Doce</strong>.
4109                    </p>
4110
4111                    <p class="text-gray-700 mb-4 text-justify leading-relaxed">
4112                        Com conteúdo de <strong class="text-gray-900">alta qualidade</strong>, a emissora leva ao público <strong class="text-gray-900">notícias</strong>, 
4113                        <strong class="text-gray-900">programas e produções acadêmicas</strong> com foco em <strong class="text-gray-900">ensino, pesquisa e 
4114                        extensão</strong>.
4115                    </p>
4116
4117                    <p class="text-gray-700 text-justify leading-relaxed">
4118                        Com apoio de professores, cientistas e profissionais de referência, oferece 
4119                        informação contextualizada e programação que aproxima a comunidade do 
4120                        <strong class="text-gray-900">conhecimento</strong> produzido dentro da universidade.
4121                    </p>
4122                </div>
4123
4124                <div class="text-center">
4125                    <a href="https://tv.univale.br/" 
4126                       class="inline-flex items-center justify-center rounded-full bg-red-600 px-6 py-3 text-white font-semibold shadow-sm hover:bg-red-700 transition focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 hover-reflect"
4127                       aria-label="Conhecer mais sobre a Univale TV e nossos serviços"
4128                       title="Saiba mais sobre o case de sucesso da Univale TV">
4129                        <i class="fas fa-play mr-3" aria-hidden="true"></i>
4130                        Conheça a Univale TV
4131                    </a>
4132                </div>
4133            </article>
4134        </div>
4135    </div>
4136</section><section 
4137  class="w-full bg-gradient-to-b from-gray-50 to-white py-20 px-4" 
4138  id="planos-app-radio-jmv" 
4139  role="region" 
4140  aria-labelledby="titulo-planos"
4141>
4142  <div class="max-w-6xl mx-auto">
4143    
4144    <header class="text-center mb-12 sm:mb-24">
4145      <h2 
4146        id="titulo-planos" 
4147        class="text-3xl sm:text-4xl lg:text-5xl font-bold text-red-600 mb-4 revealUp"
4148      >
4149        Escolha o plano ideal para sua  rádio
4150      </h2>
4151
4152      <p class="text-gray-600 text-base sm:text-lg max-w-3xl mx-auto revealUp">
4153        Do aplicativo exclusivo ao ecossistema Cross Media completo. Transforme sua rádio em uma plataforma digital de sucesso.
4154      </p>
4155    </header>
4156
4157    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 lg:gap-12 pb-8 sm:pb-12" role="list" aria-label="Planos disponíveis">
4158      
4159      <!-- Plano Start (Só Aplicativo) -->
4160      <article 
4161        class="bg-white rounded-2xl border border-gray-200 flex flex-col items-center px-6 py-8 shadow-lg transition duration-300 hover:shadow-xl hover:-translate-y-1 hover:border-red-500 mx-2 sm:mx-0 revealUp" 
4162        role="listitem"
4163        aria-labelledby="plano-start-titulo"
4164      >
4165        <h3 id="plano-start-titulo" class="text-xl font-bold text-red-600 mb-1">Start</h3>
4166        <p class="text-gray-500 text-sm mb-4">Aplicativo personalizado para sua rádio</p>
4167        <div class="text-red-600 text-3xl font-bold mb-1" aria-label="Preço de 270 reais por mês">
4168          <span class="sr-only">R$</span>R$ 270<span class="text-base font-normal">/mês*</span>
4169        </div>
4170        <div class="text-xs text-gray-400 mb-6 text-center">12x de R$ 270,00 - Pacote anual</div>
4171        <a 
4172          href="https://jmvtechnology.com/users/store/planos-personalizados/pacote-completo-radio-start" 
4173          class="w-full max-w-[220px] text-center bg-white border-2 border-red-500 text-red-500 font-semibold rounded-lg py-3 mb-6 transition hover:bg-red-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 hover-reflect"
4174          aria-label="Comprar plano Start"
4175          title="Comprar o Plano Start"
4176          target="_blank"
4177          rel="noopener noreferrer"
4178        >
4179          Comprar Agora
4180        </a>
4181        <ul class="text-gray-700 text-sm space-y-3 w-full" role="list" aria-label="Recursos inclusos no plano Start">
4182          <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">✔</span>App exclusivo Android e iOS</li>
4183          <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">✔</span>Streaming integrado (seu provedor atual)</li>
4184          <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">✔</span>Spotify da Rádio (Biblioteca de Áudio Integrada)</li>
4185          <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">✔</span>Sistema de gestão de sorteios integrado</li>
4186          <!-- Removed notícias automáticas and push notifications from Start as requested -->
4187          <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">✔</span>Personalização visual completa</li>
4188          <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">✔</span>Suporte técnico incluso</li>
4189        </ul>
4190      </article>
4191
4192      <!-- Plano Cross Media (Ecossistema Cross Media) -->
4193      <article 
4194        class="relative bg-white rounded-2xl border-2 border-red-500 flex flex-col items-center px-7 py-10 shadow-xl z-10 scale-105 md:scale-110 transition duration-300 hover:shadow-2xl hover:-translate-y-2 hover:border-red-700 mx-2 sm:mx-0" 
4195        role="listitem"
4196        aria-labelledby="plano-crossmedia-titulo"
4197        aria-describedby="plano-popular-badge"
4198      >
4199        <span 
4200          id="plano-popular-badge"
4201          class="absolute -top-4 left-1/2 transform -translate-x-1/2 bg-red-500 text-white text-xs font-bold py-2 px-4 rounded-full shadow-lg z-20"
4202          role="note"
4203          aria-label="Plano mais popular"
4204        >
4205          MAIS POPULAR
4206        </span>
4207        <h3 id="plano-crossmedia-titulo" class="text-xl font-bold text-red-600 mb-1 mt-2">Cross Media</h3>
4208        <p class="text-gray-500 text-sm mb-4">Ecossistema Cross Media completo para sua rádio</p>
4209        <div class="text-red-600 text-3xl font-bold mb-1" aria-label="Preço de 470 reais por mês">
4210          <span class="sr-only">R$</span>R$ 470<span class="text-base font-normal">/mês*</span>
4211        </div>
4212        <div class="text-xs text-gray-400 mb-6 text-center">12x de R$ 470,00 - Pacote anual</div>
4213        <a 
4214          href="https://jmvtechnology.com/users/store/planos-personalizados/pacote-completo-radio-full" 
4215          class="w-full max-w-[220px] text-center bg-red-500 border-2 border-red-500 text-white font-semibold rounded-lg py-3 mb-6 transition hover:bg-white hover:text-red-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 hover-reflect"
4216          aria-label="Comprar o plano Cross Media"
4217          title="Comprar o Plano Cross Media"
4218          target="_blank"
4219          rel="noopener noreferrer"
4220        >
4221          Comprar Agora
4222        </a>
4223        <ul class="text-gray-700 text-sm space-y-3 w-full" role="list" aria-label="Recursos inclusos no plano Cross Media">
4224          <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">✔</span>Tudo do plano Start +</li>
4225          <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">✔</span>CockPit da Rádio — CRM completo para gestão de toda a operação da sua rádio</li>
4226          <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">✔</span>Streaming de áudio profissional</li>
4227          <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">✔</span>Sistema de pedidos musicais</li>
4228          <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">✔</span>Notícias automáticas com IA (Inteligência Artificial)</li>
4229          <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">✔</span>Push notifications</li>
4230          <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">✔</span>Skill Alexa personalizada</li>
4231          <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">✔</span>Streaming de vídeo ao vivo/Câmera do Estúdio</li>
4232          <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">✔</span>Gravação da Câmera do Estúdio</li>
4233          <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">✔</span>Live Social integrado</li>
4234          <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">✔</span>JMV ADS (sistema de anúncios)</li>
4235          <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">✔</span>Sistema de enquetes</li>
4236          <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">✔</span>Hospedagem de vídeos</li>
4237          <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">✔</span>Site administrável completo</li>
4238        </ul>
4239      </article>
4240
4241      <!-- Plano Enterprise -->
4242      <article 
4243        class="bg-white rounded-2xl border border-gray-200 flex flex-col items-center px-6 py-8 shadow-lg transition duration-300 hover:shadow-xl hover:-translate-y-1 hover:border-red-500 mx-2 sm:mx-0 revealUp" 
4244        role="listitem"
4245        aria-labelledby="plano-enterprise-titulo"
4246      >
4247        <h3 id="plano-enterprise-titulo" class="text-xl font-bold text-red-600 mb-1">Enterprise</h3>
4248        <p class="text-gray-500 text-sm mb-4">
4248Acompanhamento estratégico completo</p>
4249        <div class="text-red-600 text-3xl font-bold mb-1" aria-label="Preço sob consulta">
4250          Sob<span class="text-base font-normal"> consulta</span>
4251        </div>
4252        <div class="text-xs text-gray-400 mb-6 text-center">12 meses de acompanhamento incluso</div>
4253        <a 
4254          href="#contato-jmv-news-ecossistema-crossmedia" 
4255          class="w-full max-w-[220px] text-center bg-white border-2 border-red-500 text-red-500 font-semibold rounded-lg py-3 mb-6 transition hover:bg-red-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 hover-reflect"
4256          aria-label="Solicitar orçamento para o plano Enterprise"
4257          title="Entrar em contato para solicitar orçamento do plano Enterprise"
4258        >
4259          Solicitar Orçamento
4260        </a>
4261        <ul class="text-gray-700 text-sm space-y-3 w-full" role="list" aria-label="Recursos inclusos no plano Enterprise">
4262          <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">✔</span>Tudo dos planos anteriores +</li>
4263          <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">✔</span>Streaming de áudio profissional</li>
4264          <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">✔</span>Plataforma JMV ADS</li>
4265          <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">✔</span>Consultorias mensais especializadas</li>
4266          <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">✔</span>Acompanhamento em ADS</li>
4267          <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">✔</span>Treinamento de equipe</li>
4268          <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">✔</span>Curso no Educating incluso</li>
4269          <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">✔</span>Mentoria estratégica digital</li>
4270          <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">✔</span>Suporte prioritário 24/7</li>
4271          <li class="flex items-start" role="listitem"><span class="text-red-500 mr-2 mt-0.5" aria-hidden="true">✔</span>Análises de performance mensais</li>
4272        </ul>
4273      </article>
4274
4275    </div>
4276
4277    <!-- Informações adicionais -->
4278    <footer class="text-center mt-12">
4279      <p class="text-gray-600 text-sm mb-2">
4280        * Todos os planos possuem fidelidade mínima de 12 meses.
4281      </p>
4282      <p class="text-gray-600 text-base">
4283        <span class="font-semibold text-red-600" role="img" aria-label="Presente">🎁</span> 
4284        <strong>Bônus especial:</strong> Consultoria gratuita para definir qual plano é ideal para sua rádio.
4285      </p>
4286    </footer>
4287    
4288    <!-- Aviso sobre prazo de entrega e alinhamento -->
4289    <div class="mt-6 max-w-3xl mx-auto text-center text-gray-600 text-sm">
4290      <p class="mb-2"><strong>Aviso:</strong> O aplicativo tem prazo de entrega de até <strong>60 dias</strong> após o pagamento da primeira parcela (válido para planos com fidelidade anual).</p>
4291      <p class="mb-0">Após a contratação será agendada uma reunião de alinhamento para definirmos as cores, módulos e demais requisitos do aplicativo.</p>
4292    </div>
4293  </div>
4294</section><section id="duvidas-frequentes-app-jmv-play" class="relative py-16 md:py-20 px-4 overflow-hidden" aria-labelledby="duvidas-title">
4295    <!-- Background Image -->
4296    <div class="absolute inset-0 z-0" role="img" aria-label="Fundo com gradiente vermelho bordô">
4297        <img src="assets/images/fundo-background-degrade-vermelho-bordo-gradiente-site-jmv-news-radio-streaming-app.webp" 
4298             alt="Fundo com gradiente vermelho bordô para seção de dúvidas frequentes" 
4299             class="w-full h-full object-cover"
4300             loading="lazy"
4301             width="1920"
4302             height="1080" />
4303        <!-- Overlay para melhorar contraste se necessário -->
4304        <div class="absolute inset-0 bg-black/10" aria-hidden="true"></div>
4305    </div>
4306
4307    <div class="max-w-4xl mx-auto relative z-10">
4308        <!-- Título e Descrição -->
4309        <header class="text-center mb-12 md:mb-16">
4310            <h2 id="duvidas-title" class="revdown text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-4" data-delay="100">
4311                Tire Suas Dúvidas
4312            </h2>
4313            <p class="revup text-pink-100 text-base md:text-lg lg:text-xl max-w-3xl mx-auto leading-relaxed" data-delay="200">
4314                Dúvidas mais comuns de usuários e parceiros sobre o JMV News
4315            </p>
4316        </header>
4317
4318        <!-- FAQ Accordion -->
4319        <div class="space-y-4 mb-12 md:mb-16" role="region" aria-label="Perguntas frequentes sobre o JMV News">
4320
4321            <!-- FAQ Item 1 -->
4322            <article class="revup faq-item bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl overflow-hidden group hover:border-pink-300/50 transition-all duration-300" data-delay="300">
4323                <h3>
4324                    <button class="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-white/5 transition-colors duration-300" 
4325                            onclick="toggleFAQ(this)"
4326                            aria-expanded="false"
4327                            aria-controls="faq-1">
4328                        <span class="text-white font-semibold text-base md:text-lg">1. Preciso mesmo do ECAD?</span>
4329                        <i class="fa-solid fa-chevron-down text-pink-200 transition-transform duration-300 group-hover:text-pink-300" aria-hidden="true"></i>
4330                    </button>
4331                </h3>
4332                <div id="faq-1" class="faq-content px-6 pb-6 hidden" role="region" aria-labelledby="faq-1">
4333                    <div class="text-pink-100 leading-relaxed">
4334                        O <abbr title="Escritório Central de Arrecadação e Distribuição">ECAD</abbr> é obrigatório para rádios que queriam o recurso do "Spotify da Rádio". Se você já possui uma rádio regular, provavelmente já contribui com o ECAD. Para o recurso de áudio on-demand, é necessário estar em dia com essa contribuição. Caso não possua o ECAD, o recurso de áudio on-demand não estará disponível no aplicativo.
4335                    </div>
4336                </div>
4337            </article>
4338
4339            <!-- FAQ Item 2 -->
4340            <article class="revleft faq-item bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl overflow-hidden group hover:border-pink-300/50 transition-all duration-300" data-delay="350">
4341                <h3>
4342                    <button class="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-white/5 transition-colors duration-300" 
4343                            onclick="toggleFAQ(this)"
4344                            aria-expanded="false"
4345                            aria-controls="faq-2">
4346                        <span class="text-white font-semibold text-base md:text-lg">2. Já vem incluso o ECAD?</span>
4347                        <i class="fa-solid fa-chevron-down text-pink-200 transition-transform duration-300 group-hover:text-pink-300" aria-hidden="true"></i>
4348                    </button>
4349                </h3>
4350                <div id="faq-2" class="faq-content px-6 pb-6 hidden" role="region">
4351                    <div class="text-pink-100 leading-relaxed">
4352                        Não, o ECAD é uma contribuição que deve ser paga diretamente ao órgão responsável. Nosso sistema funciona integrado com rádios que já possuem essa regularização.
4353                    </div>
4354                </div>
4355            </article>
4356
4357            <!-- FAQ Item 3 -->
4358            <article class="revright faq-item bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl overflow-hidden group hover:border-pink-300/50 transition-all duration-300" data-delay="400">
4359                <h3>
4360                    <button class="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-white/5 transition-colors duration-300" 
4361                            onclick="toggleFAQ(this)"
4362                            aria-expanded="false"
4363                            aria-controls="faq-3">
4364                        <span class="text-white font-semibold text-base md:text-lg">3. Já tenho tudo exceto o aplicativo, posso contratar somente o aplicativo?</span>
4365                        <i class="fa-solid fa-chevron-down text-pink-200 transition-transform duration-300 group-hover:text-pink-300" aria-hidden="true"></i>
4366                    </button>
4367                </h3>
4368                <div id="faq-3" class="faq-content px-6 pb-6 hidden" role="region">
4369                    <div class="text-pink-100 leading-relaxed">
4370                        Sim! Oferecemos o aplicativo de forma independente. Podemos integrar com sua infraestrutura existente, mantendo sua marca e identidade visual.
4371                    </div>
4372                </div>
4373            </article>
4374
4375            <!-- FAQ Item 4 -->
4376            <article class="revup faq-item bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl overflow-hidden group hover:border-pink-300/50 transition-all duration-300" data-delay="450">
4377                <h3>
4378                    <button class="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-white/5 transition-colors duration-300" 
4379                            onclick="toggleFAQ(this)"
4380                            aria-expanded="false"
4381                            aria-controls="faq-4">
4382                        <span class="text-white font-semibold text-base md:text-lg">4. Já tenho site, preciso migrar para vocês?</span>
4383                        <i class="fa-solid fa-chevron-down text-pink-200 transition-transform duration-300 group-hover:text-pink-300" aria-hidden="true"></i>
4384                    </button>
4385                </h3>
4386                <div id="faq-4" class="faq-content px-6 pb-6 hidden" role="region">
4387                    <div class="text-pink-100 leading-relaxed">
4388                        Não é necessário migrar! Porém, caso deseje o recurso de notícias geradas por <abbr title="Inteligência Artificial">IA</abbr> integradas automaticamente ao aplicativo, seu site precisa ser em WordPress.
4389                    </div>
4390                </div>
4391            </article>
4392
4393            <!-- FAQ Item 5 -->
4394            <article class="revleft faq-item bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl overflow-hidden group hover:border-pink-300/50 transition-all duration-300" data-delay="500">
4395                <h3>
4396                    <button class="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-white/5 transition-colors duration-300" 
4397                            onclick="toggleFAQ(this)"
4398                            aria-expanded="false"
4399                            aria-controls="faq-5">
4400                        <span class="text-white font-semibold text-base md:text-lg">5. Qual o prazo para liberação do site e do aplicativo?</span>
4401                        <i class="fa-solid fa-chevron-down text-pink-200 transition-transform duration-300 group-hover:text-pink-300" aria-hidden="true"></i>
4402                    </button>
4403                </h3>
4404                <div id="faq-5" class="faq-content px-6 pb-6 hidden" role="region">
4405                    <div class="text-pink-100 leading-relaxed">
4406                        O prazo médio é de até 60 dias úteis, dependendo da complexidade do projeto e dos recursos solicitados.
4407                    </div>
4408                </div>
4409            </article>
4410
4411            <!-- FAQ Item 6 -->
4412            <article class="revright faq-item bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl overflow-hidden group hover:border-pink-300/50 transition-all duration-300" data-delay="550">
4413                <h3>
4414                    <button class="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-white/5 transition-colors duration-300" 
4415                            onclick="toggleFAQ(this)"
4416                            aria-expanded="false"
4417                            aria-controls="faq-6">
4418                        <span class="text-white font-semibold text-base md:text-lg">6. O que é skill da Alexa?</span>
4419                        <i class="fa-solid fa-chevron-down text-pink-200 transition-transform duration-300 group-hover:text-pink-300" aria-hidden="true"></i>
4420                    </button>
4421                </h3>
4422                <div id="faq-6" class="faq-content px-6 pb-6 hidden" role="region">
4423                    <div class="text-pink-100 leading-relaxed">
4424                        A skill da Alexa permite que seus ouvintes escutem sua rádio através de comandos de voz nos dispositivos Amazon Echo. Ainda não temos essa funcionalidade liberada, mas ela pode ser desenvolvida sob consulta.
4425                    </div>
4426                </div>
4427            </article>
4428
4429            <!-- FAQ Item 7 -->
4430            <article class="revup faq-item bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl overflow-hidden group hover:border-pink-300/50 transition-all duration-300" data-delay="600">
4431                <h3>
4432                    <button class="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-white/5 transition-colors duration-300" 
4433                            onclick="toggleFAQ(this)"
4434                            aria-expanded="false"
4435                            aria-controls="faq-7">
4436                        <span class="text-white font-semibold text-base md:text-lg">7. Vocês vendem separado o site e aplicativo?</span>
4437                        <i class="fa-solid fa-chevron-down text-pink-200 transition-transform duration-300 group-hover:text-pink-300" aria-hidden="true"></i>
4438                    </button>
4439                </h3>
4440                <div id="faq-7" class="faq-content px-6 pb-6 hidden" role="region">
4441                    <div class="text-pink-100 leading-relaxed">
4442                        Sim! Você pode contratar apenas o site, apenas o aplicativo ou o pacote completo integrado. Oferecemos flexibilidade para atender diferentes necessidades e orçamentos.
4443                    </div>
4444                </div>
4445            </article>
4446
4447            <!-- FAQ Item 8 -->
4448            <article class="revleft faq-item bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl overflow-hidden group hover:border-pink-300/50 transition-all duration-300" data-delay="650">
4449                <h3>
4450                    <button class="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-white/5 transition-colors duration-300" 
4451                            onclick="toggleFAQ(this)"
4452                            aria-expanded="false"
4453                            aria-controls="faq-8">
4454                        <span class="text-white font-semibold text-base md:text-lg">8. Tem como inserir também o vídeo ao vivo no aplicativo?</span>
4455                        <i class="fa-solid fa-chevron-down text-pink-200 transition-transform duration-300 group-hover:text-pink-300" aria-hidden="true"></i>
4456                    </button>
4457                </h3>
4458                <div id="faq-8" class="faq-content px-6 pb-6 hidden" role="region">
4459                    <div class="text-pink-100 leading-relaxed">
4460                        Sim! O aplicativo suporta transmissão de vídeo ao vivo. Você pode integrar sua transmissão ao vivo diretamente no app, oferecendo vídeo para seus usuários.
4461                    </div>
4462                </div>
4463            </article>
4464
4465            <!-- FAQ Item 9 -->
4466            <article class="revright faq-item bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl overflow-hidden group hover:border-pink-300/50 transition-all duration-300" data-delay="700">
4467                <h3>
4468                    <button class="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-white/5 transition-colors duration-300" 
4469                            onclick="toggleFAQ(this)"
4470                            aria-expanded="false"
4471                            aria-controls="faq-9">
4472                        <span class="text-white font-semibold text-base md:text-lg">9. A galeria de vídeos é pelo YouTube ou privado?</span>
4473                        <i class="fa-solid fa-chevron-down text-pink-200 transition-transform duration-300 group-hover:text-pink-300" aria-hidden="true"></i>
4474                    </button>
4475                </h3>
4476                <div id="faq-9" class="faq-content px-6 pb-6 hidden" role="region">
4477                    <div class="text-pink-100 leading-relaxed">
4478                        Oferecemos ambas as opções! Você pode integrar vídeos do YouTube ou hospedar vídeos privativos em nossa plataforma, dependendo da sua preferência e estratégia de conteúdo.
4479                    </div>
4480                </div>
4481            </article>
4482
4483            <!-- FAQ Item 10 -->
4484            <article class="revup faq-item bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl overflow-hidden group hover:border-pink-300/50 transition-all duration-300" data-delay="750">
4485                <h3>
4486                    <button class="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-white/5 transition-colors duration-300" 
4487                            onclick="toggleFAQ(this)"
4488                            aria-expanded="false"
4489                            aria-controls="faq-10">
4490                        <span class="text-white font-semibold text-base md:text-lg">10. Como funciona o sistema de sorteios?</span>
4491                        <i class="fa-solid fa-chevron-down text-pink-200 transition-transform duration-300 group-hover:text-pink-300" aria-hidden="true"></i>
4492                    </button>
4493                </h3>
4494                <div id="faq-10" class="faq-content px-6 pb-6 hidden" role="region">
4495                    <div class="text-pink-100 leading-relaxed">
4496                        O sistema de sorteios permite que você cadastre promoções diretamente no aplicativo. Os usuários se inscrevem através do app e você pode sortear automaticamente, aumentando o engajamento.
4497                    </div>
4498                </div>
4499            </article>
4500
4501            <!-- FAQ Item 11 -->
4502            <article class="revleft faq-item bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl overflow-hidden group hover:border-pink-300/50 transition-all duration-300" data-delay="800">
4503                <h3>
4504                    <button class="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-white/5 transition-colors duration-300" 
4505                            onclick="toggleFAQ(this)"
4506                            aria-expanded="false"
4507                            aria-controls="faq-11">
4508                        <span class="text-white font-semibold text-base md:text-lg">11. Posso inserir banners no aplicativo?</span>
4509                        <i class="fa-solid fa-chevron-down text-pink-200 transition-transform duration-300 group-hover:text-pink-300" aria-hidden="true"></i>
4510                    </button>
4511                </h3>
4512                <div id="faq-11" class="faq-content px-6 pb-6 hidden" role="region">
4513                    <div class="text-pink-100 leading-relaxed">
4514                        Sim! O aplicativo possui espaços dedicados para banners publicitários. Você pode monetizar com anúncios de parceiros locais e ter total controle sobre o conteúdo exibido.
4515                    </div>
4516                </div>
4517            </article>
4518
4519            <!-- FAQ Item 12 -->
4520            <article class="revright faq-item bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl overflow-hidden group hover:border-pink-300/50 transition-all duration-300" data-delay="850">
4521                <h3>
4522                    <button class="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-white/5 transition-colors duration-300" 
4523                            onclick="toggleFAQ(this)"
4524                            aria-expanded="false"
4525                            aria-controls="faq-12">
4526                        <span class="text-white font-semibold text-base md:text-lg">12. Já vem com hospedagem do site?</span>
4527                        <i class="fa-solid fa-chevron-down text-pink-200 transition-transform duration-300 group-hover:text-pink-300" aria-hidden="true"></i>
4528                    </button>
4529                </h3>
4530                <div id="faq-12" class="faq-content px-6 pb-6 hidden" role="region">
4531                    <div class="text-pink-100 leading-relaxed">
4532                        Temos três opções: <strong>Start</strong> — apenas o aplicativo (sem site); <strong>Cross Media</strong> — site + aplicativo + Cockpit da Rádio (CRM completo para profissionalizar a operação da sua rádio); e <strong>Enterprise</strong> — plano para monetização, com treinamento, cursos e estratégias para potencializar os resultados. A hospedagem do site está incluída apenas no Cross Media e no Enterprise.
4533                    </div>
4534                </div>
4535            </article>
4536           
4537        </div>
4538
4539        <!-- CTA Final -->
4540        <aside class="revup bg-black/20 backdrop-blur-sm rounded-2xl p-6 md:p-8 text-center border border-pink-300/20 cta-card" data-delay="800">
4541            <h3 class="text-2xl md:text-3xl font-bold text-white mb-4">
4542                Pronto para elevar o nível da sua rádio?
4543            </h3>
4544            <p class="text-pink-100 text-base md:text-lg mb-6 max-w-2xl mx-auto">
4545                Baixe nosso app de demonstração e veja na prática como sua rádio pode se transformar digitalmente
4546            </p>
4547            
4548            <!-- Download Buttons Container -->
4549            <div class="flex flex-col lg:flex-row gap-4 justify-center items-center mb-6">
4550                <!-- Android Download Button -->
4551                <a href="https://play.google.com/store/apps/details?id=com.jmvnews&hl=pt_BR" 
4552                   class="inline-flex items-center bg-gradient-to-r from-green-500 to-green-600 text-white font-bold py-4 px-6 md:px-8 rounded-full text-base md:text-lg transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-green-500/30 transform group focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-black"
4553                   aria-label="Baixar aplicativo JMV News na Google Play Store"
4554                   title="Download para Android - Google Play Store"
4555                   target="_blank"
4556                   rel="noopener noreferrer">
4557                    <i class="fab fa-google-play mr-3 text-xl group-hover:animate-bounce" aria-hidden="true"></i>
4558                    <span class="flex flex-col items-start">
4559                        <span class="text-xs opacity-90">Baixar para</span>
4560                        <span class="text-lg font-bold">Android</span>
4561                    </span>
4562                </a>
4563
4564                <!-- iOS Download Button -->
4565                <a href="https://apps.apple.com/br/developer/jmv-technology-eirelli/id614109372" 
4566                   class="inline-flex items-center bg-gradient-to-r from-blue-500 to-blue-600 text-white font-bold py-4 px-6 md:px-8 rounded-full text-base md:text-lg transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-blue-500/30 transform group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-black"
4567                   aria-label="Baixar aplicativo JMV News na App Store"
4568                   title="Download para iOS - App Store"
4569                   target="_blank"
4570                   rel="noopener noreferrer">
4571                    <i class="fab fa-apple mr-3 text-xl group-hover:animate-bounce" aria-hidden="true"></i>
4572                    <span class="flex flex-col items-start">
4573                        <span class="text-xs opacity-90">Baixar para</span>
4574                        <span class="text-lg font-bold">iPhone</span>
4575                    </span>
4576                </a>
4577            </div>
4578
4579            <!-- Contact Button -->
4580            <div class="flex justify-center">
4581                <a href="#contato-jmv-news-ecossistema-crossmedia" 
4582                   class="inline-block bg-transparent border-2 border-pink-300 text-pink-300 font-bold py-4 px-8 md:px-12 rounded-full text-lg md:text-xl transition-all duration-300 hover:bg-pink-300 hover:text-red-800 hover:scale-105 transform group focus:outline-none focus:ring-2 focus:ring-pink-300 focus:ring-offset-2 focus:ring-offset-black"
4583                   aria-label="Entrar em contato com especialistas do JMV News"
4584                   title="Falar com especialista sobre implementação">
4585                    <i class="fa-solid fa-handshake mr-2 group-hover:animate-pulse" aria-hidden="true"></i>
4586                    Entrar em contato
4587                </a>
4588            </div>
4589        </aside>
4590
4591    </div>
4592</section>
4593
4594<script>
4595function toggleFAQ(button) {
4596    const faqItem = button.closest('.faq-item');
4597    const content = faqItem.querySelector('.faq-content');
4598    const icon = button.querySelector('.fa-chevron-down');
4599    
4600    // Close all other FAQ items
4601    document.querySelectorAll('.faq-item').forEach(item => {
4602        if (item !== faqItem) {
4603            item.querySelector('.faq-content').classList.add('hidden');
4604            item.querySelector('.fa-chevron-down').classList.remove('rotate-180');
4605        }
4606    });
4607    
4608    // Toggle current FAQ item
4609    content.classList.toggle('hidden');
4610    icon.classList.toggle('rotate-180');
4611}
4612</script>
4612<section id="contato-jmv-news-ecossistema-crossmedia" class="bg-black py-16 md:py-20 px-4 relative overflow-hidden" aria-labelledby="contato-title">
4613    <!-- Background Pattern -->
4614    <div class="absolute inset-0 opacity-5" aria-hidden="true">
4615        <div class="absolute top-10 left-10 w-2 h-2 bg-cyan-400 rounded-full animate-pulse"></div>
4616        <div class="absolute top-32 right-20 w-1 h-1 bg-blue-400 rounded-full animate-bounce"></div>
4617        <div class="absolute bottom-20 left-1/4 w-1.5 h-1.5 bg-purple-400 rounded-full animate-pulse delay-300"></div>
4618        <div class="absolute bottom-40 right-1/3 w-1 h-1 bg-csyan-300 rounded-full animate-bounce delay-700"></div>
4619    </div>
4620
4621    <div class="max-w-7xl mx-auto relative z-10">
4622        <!-- Título Principal -->
4623        <header class="revdown text-center mb-12 md:mb-16" data-delay="100">
4624            <h2 id="contato-title" class="text-3xl md:text-4xl lg:text-4xl font-bold text-white mb-4">
4625                Sua Rádio Não Nasceu Para Ser Só Mais Uma Frequência
4626            </h2>
4627            <p class="text-gray-300 text-base md:text-lg lg:text-xl max-w-3xl mx-auto leading-relaxed">
4628                <span class="text-white font-semibold">Chegou a hora</span> de faturar no digital. Transforme sua rádio em uma plataforma exclusiva, aplicando estratégias de grandes players, com tecnologia própria e monetização 100% sua.
4629            </p>
4630        </header>
4631
4632        <div class="flex flex-col lg:flex-row gap-12 lg:gap-16 items-start">
4633            <!-- Formulário -->
4634            <div class="revleft flex-1 max-w-2xl mx-auto lg:mx-0" data-delay="200">
4635                <div class="bg-white rounded-3xl p-8 md:p-10 shadow-2xl">
4636                    <h3 class="text-2xl md:text-3xl font-bold text-red-600 text-center mb-8">
4637                        <i class="fa-solid fa-file-lines mr-3" aria-hidden="true"></i>
4638                        Entre em Contato
4639                    </h3>
4640
4641                    <!-- Mensagem de Status -->
4642                    <div id="mensagemRetorno" 
4643                         class="text-lg font-semibold mt-4 hidden" 
4644                         role="alert" 
4645                         aria-live="polite" 
4646                         aria-atomic="true">
4647                    </div>
4648
4649                    <form id="contatoForm" 
4650                          action="send-lead-jmvnews.php" 
4651                          method="POST" 
4652                          class="space-y-6"
4653                          novalidate
4654                          aria-label="Formulário de contato">
4655                        <!-- Campo honeypot (anti-spam) -->
4656                        <input type="text" name="website" style="display: none;" tabindex="-1" autocomplete="off" aria-hidden="true">
4657
4658                        <!-- Nome -->
4659                        <div class="form-group">
4660                            <label for="nome" class="block text-red-600 font-semibold mb-2 text-sm md:text-base">
4661                                Seu Nome <span aria-label="obrigatório">*</span>
4662                            </label>
4663                            <input type="text" 
4664                                   id="nome"
4665                                   name="nome"
4666                                   class="w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-red-400 focus:outline-none transition-all duration-300 hover:border-gray-300"
4667                                   placeholder="Digite seu nome completo"
4668                                   required
4669                                   autocomplete="name"
4670                                   aria-describedby="nome-error">
4671                            <div id="nome-error" class="text-red-500 text-sm mt-1 hidden" role="alert"></div>
4672                        </div>
4673
4674                        <!-- Email e Telefone -->
4675                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6">
4676                            <!-- Email -->
4677                            <div class="form-group">
4678                                <label for="email" class="block text-red-600 font-semibold mb-2 text-sm md:text-base">
4679                                    E-mail <span aria-label="obrigatório">*</span>
4680                                </label>
4681                                <input type="email" 
4682                                       id="email"
4683                                       name="email"
4684                                       class="w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-red-400 focus:outline-none transition-all duration-300 hover:border-gray-300"
4685                                       placeholder="[email protected]"
4686                                       required
4687                                       autocomplete="email"
4688                                       aria-describedby="email-error">
4689                                <div id="email-error" class="text-red-500 text-sm mt-1 hidden" role="alert"></div>
4690                            </div>
4691
4692                            <!-- Telefone -->
4693                            <div class="form-group">
4694                                <label for="telefone" class="block text-red-600 font-semibold mb-2 text-sm md:text-base">
4695                                    Telefone <span aria-label="obrigatório">*</span>
4696                                </label>
4697                                <input type="tel" 
4698                                       id="telefone"
4699                                       name="telefone"
4700                                       class="w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-red-400 focus:outline-none transition-all duration-300 hover:border-gray-300"
4701                                       placeholder="(11) 99999-9999"
4702                                       required
4703                                       autocomplete="tel"
4704                                       aria-describedby="telefone-error">
4705                                <div id="telefone-error" class="text-red-500 text-sm mt-1 hidden" role="alert"></div>
4706                            </div>
4707                        </div>
4708
4709                        <!-- Mensagem -->
4710                        <div class="form-group">
4711                            <label for="mensagem" class="block text-red-600 font-semibold mb-2 text-sm md:text-base">
4712                                Mensagem (Opcional)
4713                            </label>
4714                            <textarea name="mensagem"
4715                                      id="mensagem"
4716                                      class="w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-red-400 focus:outline-none transition-all duration-300 hover:border-gray-300 resize-none"
4717                                      rows="4"
4718                                      placeholder="Conte-nos mais sobre sua emissora, tipo de conteúdo, localização, audiência..."
4719                                      aria-describedby="mensagem-help"></textarea>
4720                            <div id="mensagem-help" class="text-gray-500 text-xs mt-1">
4721                                Opcional: Conte mais sobre sua rádio para um atendimento personalizado
4722                            </div>
4723                        </div>
4724
4725                        <!-- Botão Enviar -->
4726                        <button type="submit" 
4727                                class="w-full bg-red-600 text-white font-bold py-4 px-8 rounded-xl text-lg transition-all duration-300 hover:bg-red-700 hover:scale-105 hover:shadow-2xl transform group submit-btn hover-reflect"
4728                                aria-describedby="submit-help">
4729                            <span class="btn-text">Enviar Mensagem</span>
4730                        </button>
4731                        <div id="submit-help" class="text-gray-500 text-xs text-center">
4732                            Seus dados estão seguros e não serão compartilhados
4733                        </div>
4734
4735                        <!-- Campos ocultos -->
4736                        <input type="hidden" name="_captcha" value="false">
4737                    </form>
4738                </div>
4739            </div>
4740
4741            <!-- Benefícios -->
4742            <aside class="revright flex-1 max-w-2xl mx-auto lg:mx-0" data-delay="300" aria-labelledby="beneficios-title">
4743                <div class="bg-gradient-to-br from-gray-800/80 to-gray-900/80 rounded-3xl p-8 md:p-10 border border-gray-700/50">
4744                    <h3 id="beneficios-title" class="text-2xl md:text-3xl font-bold text-white mb-8">
4745                        Por que sua rádio precisa disso
4746                    </h3>
4747                    
4748                    <p class="text-gray-300 mb-8 leading-relaxed">
4749                        Mais audiência, mais engajamento e novas formas de monetização em um só lugar.
4750                    </p>
4751                    
4752                    <ul class="space-y-4" role="list" aria-label="Benefícios do aplicativo">
4753                        <li class="revup flex items-start gap-4 benef
4753it-item transition-all duration-300 hover:bg-white/5 p-3 rounded-xl" data-delay="400">
4754                            <div class="w-6 h-6 flex items-center justify-center flex-shrink-0 mt-1" aria-hidden="true">
4755                                <i class="fa-solid fa-mobile-screen text-green-400 text-sm"></i>
4756                            </div>
4757                            <div>
4758                                <p class="text-gray-200 text-sm leading-relaxed">Aplicativo exclusivo publicado nas lojas oficiais</p>
4759                            </div>
4760                        </li>
4761
4762                        <li class="revup flex items-start gap-4 benefit-item transition-all duration-300 hover:bg-white/5 p-3 rounded-xl" data-delay="450">
4763                            <div class="w-6 h-6 flex items-center justify-center flex-shrink-0 mt-1" aria-hidden="true">
4764                                <i class="fa-solid fa-tower-broadcast text-green-400 text-sm"></i>
4765                            </div>
4766                            <div>
4767                                <p class="text-gray-200 text-sm leading-relaxed">Ecossistema Cross Media: rádio ao vivo, músicas, notícias e sorteios</p>
4768                            </div>
4769                        </li>
4770
4771                        <li class="revup flex items-start gap-4 benef
4771it-item transition-all duration-300 hover:bg-white/5 p-3 rounded-xl" data-delay="500">
4772                            <div class="w-6 h-6 flex items-center justify-center flex-shrink-0 mt-1" aria-hidden="true">
4773                                <i class="fa-solid fa-users text-green-400 text-sm"></i>
4774                            </div>
4775                            <div>
4776                                <p class="text-gray-200 text-sm leading-relaxed">Engajamento real com ouvintes através de pedidos e interatividade</p>
4777                            </div>
4778                        </li>
4779
4780                        <li class="revup flex items-start gap-4 benefit-item transition-all duration-300 hover:bg-white/5 p-3 rounded-xl" data-delay="550">
4781                            <div class="w-6 h-6 flex items-center justify-center flex-shrink-0 mt-1" aria-hidden="true">
4782                                <i class="fa-solid fa-chart-line text-green-400 text-sm"></i>
4783                            </div>
4784                            <div>
4785                                <p class="text-gray-200 text-sm leading-relaxed">Mais visibilidade e credibilidade para sua emissora</p>
4786                            </div>
4787                        </li>
4788
4789                        <li class="revup flex items-start gap-4 benef
4789it-item transition-all duration-300 hover:bg-white/5 p-3 rounded-xl" data-delay="600">
4790                            <div class="w-6 h-6 flex items-center justify-center flex-shrink-0 mt-1" aria-hidden="true">
4791                                <i class="fa-solid fa-headset text-green-400 text-sm"></i>
4792                            </div>
4793                            <div>
4794                                <p class="text-gray-200 text-sm leading-relaxed">Suporte humano, sem robôs, todos os dias da semana</p>
4795                            </div>
4796                        </li>
4797
4798                        <li class="revup flex items-start gap-4 benefit-item transition-all duration-300 hover:bg-white/5 p-3 rounded-xl" data-delay="650">
4799                            <div class="w-6 h-6 flex items-center justify-center flex-shrink-0 mt-1" aria-hidden="true">
4800                                <i class="fa-solid fa-server text-green-400 text-sm"></i>
4801                            </div>
4802                            <div>
4803                                <p class="text-gray-200 text-sm leading-relaxed">Tecnologia confiável usada por rádios e TVs de referência</p>
4804                            </div>
4805                        </li>
4806                    </ul>
4807                </div>
4808            </aside>
4809        </div>
4810    </div>
4811</section>
4812
4813<script>
4814const form = document.getElementById("contatoForm");
4815const mensagemRetorno = document.getElementById("mensagemRetorno");
4816
4817form.addEventListener("submit", async function (e) {
4818    e.preventDefault();
4819    mensagemRetorno.classList.add("hidden"); // oculta mensagem anterior
4820    
4821    const submitBtn = form.querySelector('.submit-btn');
4822    const btnText = submitBtn.querySelector('.btn-text');
4823    
4824    // Desabilita o botão e mostra loading
4825    submitBtn.disabled = true;
4826    btnText.textContent = 'Enviando...';
4827    
4828    const formData = new FormData(form);
4829
4830    try {
4831        const response = await fetch(form.action, {
4832            method: "POST",
4833            body: formData,
4834        });
4835
4836        const result = await response.json();
4837
4838        mensagemRetorno.textContent = result.message;
4839        mensagemRetorno.classList.remove("hidden");
4840        mensagemRetorno.classList.remove("text-red-400", "text-green-400");
4841
4842        if (result.status === "success") {
4843            mensagemRetorno.classList.add("text-green-400");
4844            form.reset();
4845        } else {
4846            mensagemRetorno.classList.add("text-red-400");
4847        }
4848    } catch (err) {
4849        mensagemRetorno.textContent = "Erro inesperado. Tente novamente.";
4850        mensagemRetorno.classList.remove("hidden");
4851        mensagemRetorno.classList.add("text-red-400");
4852    } finally {
4853        // Reabilita o botão
4854        submitBtn.disabled = false;
4855        btnText.textContent = 'Enviar';
4856        
4857        // Remove mensagem após 5 segundos
4858        setTimeout(() => {
4859            mensagemRetorno.classList.add("hidden");
4860        }, 5000);
4861    }
4862});
4863</script>
4863
4864
4865<!-- Estilos mantidos -->
4866<style>
4867.form-container {
4868    position: relative;
4869    overflow: hidden;
4870    transition: all 0.6s ease;
4871}
4872
4873.form-container::before {
4874    content: '';
4875    position: absolute;
4876    top: -50%;
4877    left: -50%;
4878    width: 200%;
4879    height: 200%;
4880    background: linear-gradient(
4881        45deg,
4882        transparent,
4883        rgba(220, 38, 38, 0.1),
4884        transparent
4885    );
4886    transform: translateX(-100%) translateY(-100%) rotate(45deg);
4887    transition: all 0.8s ease;
4888    opacity: 0;
4889    z-index: 1;
4890    pointer-events: none;
4891}
4892
4893.form-container:hover::before {
4894    opacity: 1;
4895    transform: translateX(100%) translateY(100%) rotate(45deg);
4896}
4897
4898.form-group {
4899    position: relative;
4900    z-index: 2;
4901}
4902
4903.submit-btn {
4904    position: relative;
4905    overflow: hidden;
4906}
4907
4908.submit-btn::before {
4909    content: '';
4910    position: absolute;
4911    top: -50%;
4912    left: -50%;
4913    width: 200%;
4914    height: 200%;
4915    background: linear-gradient(
4916        45deg,
4917        transparent,
4918        rgba(255, 255, 255, 0.1),
4919        transparent
4920    );
4921    transform: translateX(-100%) translateY(-100%) rotate(45deg);
4922    transition: all 0.6s ease;
4923    opacity: 0;
4924    z-index: 1;
4925    pointer-events: none;
4926}
4927
4928.submit-btn:hover::before {
4929    opacity: 1;
4930    transform: translateX(100%) translateY(100%) rotate(45deg);
4931}
4932
4933.benefit-item:hover {
4934    transform: translateX(5px);
4935}
4936</style>
4937
4938        </main>
4939
4940        <!-- Footer -->
4941        <footer style="background:#111827;border-top:1px solid rgba(255,255,255,.08);" role="contentinfo">
4942            <div style="max-width:1280px;margin:0 auto;padding:28px 32px;">
4943                <div class="lp-footer-wrap">
4944                    <a href="https://jmvnews.com/pt-br/" aria-label="JMV News — Voltar ao portal">
4945                        <img src="assets/images/logo-jmv-news-logomarca-oficial-app-para-radios-tv-streaming-jmv-technology.webp"
4946                             alt="JMV News"
4947                             style="height:28px;width:auto;opacity:.8;transition:opacity .2s;"
4948                             onmouseover="this.style.opacity=1" onmouseout="this.style.opacity=.8">
4949                    </a>
4950                    <nav class="lp-footer-nav" aria-label="Links do rodapé">
4951                        <a href="https://jmvnews.com/pt-br/">Portal</a>
4952                        <a href="https://jmvnews.com/contato/">Contato</a>
4953                        <a href="https://jmvtechnology.com/pt-br/privacy" target="_blank" rel="noopener noreferrer">Privacidade</a>
4954                        <a href="https://jmvtechnology.com/pt-br/terms" target="_blank" rel="noopener noreferrer">Termos</a>
4955                    </nav>
4956                    <p class="lp-footer-copy">© 2025 JMV Technology</p>
4957                </div>
4958            </div>
4959        </footer>
4960    
4960<script defer src="https://static.cloudflareinsights.com/beacon.min.js/v833ccba57c9e4d2798f2e76cebdd09a11778172276447" integrity="sha512-57MDmcccJXYtNnH+ZiBwzC4jb2rvgVCEokYN+L/nLlmO8rfYT/gIpW2A569iJ/3b+0UEasghjuZH/ma3wIs/EQ==" data-cf-beacon='{"version":"2024.11.0","token":"8a890f3cb29345a18750831e8ab9b763","r":1,"server_timing":{"name":{"cfCacheStatus":true,"cfEdge":true,"cfExtPri":true,"cfL4":true,"cfOrigin":true,"cfSpeedBrain":true},"location_startswith":null}}' crossorigin="anonymous"></script>
vendor: 2 bytes, line 4960
4960
4961<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"8a890f3cb29345a18750831e8ab9b763","r":1,"spa":2}' crossorigin="anonymous"></script>
4961
4962</body>
4963</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.