PageSourceSearch

https://appvouf.com.br/anuncie-noVouF.php

html appvouf.com.br collected 2026-10-02 01:17:35 UTC 115,053 bytes, 2,918 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.0">
6    <meta name="theme-color" content="#ff6600">
7    
8	
9	
10    <!-- SEO & Meta Tags -->
11    <meta name="referrer" content="no-referrer-when-downgrade">
12    <meta property="og:title" content="VouF">
13    <meta property="og:description" content="Divirta-se testando seus conhecimentos e ganhe recompensas!">
14    <meta property="og:url" content="https://appvouf.com.br/anuncie-noVouF.php">
15    <meta property="og:image" content="https://appvouf.com.br/imagens/banner3.png">
16    <meta property="og:type" content="website">
17	<title>VouF</title>
18
19    <!-- Favicon & PWA -->
20    <link rel="icon" href="LogoVouFGames.png">
21    <link rel="shortcut icon" href="LogoVouFGames.png">
22    <link rel="manifest" href="/manifest.json">
23    <link rel="apple-touch-icon" href="/imagens/icon-192x192.png">
24    
25    <!-- Fonts & CSS -->
26    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
27    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
28    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
29    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.css">
30    <link rel="stylesheet" href="header.css?v=1781196744">
31	<link rel="stylesheet" href="?v=">
32    
33    
33<script src="https://analytics.ahrefs.com/analytics.js" data-key="Pz79EOvWHtnF5bv/L1mY9w" async></script>
33
34    <!-- Scripts Externos -->
35    
35<script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer></script>
35
36    
36<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js" crossorigin="anonymous"></script>
36
37	
37<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
37
38    
38<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/inputmask.min.js"></script>
38
39    
39<script src="js/advertisement.js"></script>
39
40    <!--
40<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5083241918622200" crossorigin="anonymous"></script>
40
41	-->
42		<!-- Monetag Ads -->
43		<!-- Vignette banner -->
44			
44<script src="https://5gvci.com/act/files/tag.min.js?z=10939313" data-cfasync="false" async></script>
44
45		<!-- Vignette banner -->
46		<!-- Monetag Ads -->
47		    
47<script>
48        window.OneSignalDeferred = window.OneSignalDeferred || [];
49        OneSignalDeferred.push(async function(OneSignal) { await OneSignal.init({ appId: "fef3b446-3012-4a4a-bf1c-ad5c75260325" }); });
50    </script>
50
51</head>
52<body class="bg-white text-gray-800 min-h-screen">
53
54<!-- ================= HEADER DESKTOP ================= -->
55<header class="header">
56    <!-- LINHA 1: Logo + Banner + Auth -->
57        <div class="header-line-1">
58        <div class="header-container">
59            <div class="flex items-center justify-between h-20 w-full">
60                <!-- Logo (Esquerda) -->
61                <div class="flex-shrink-0 flex items-center h-20">
62                    <a href="index.php" class="block">
63                        <img src="LogoVouFGames.png" alt="VouF" class="object-contain cursor-pointer h-20">
64                    </a>
65                </div>
66                
67                <!-- Banner (Centro) -->
68                <div class="flex-grow flex justify-center items-center overflow-hidden relative mx-2" id="banner-wrapper" style="height: 99%;">
69                    <a href="anuncie-noVouF.php" class="absolute top-0 left-0 z-20 bg-black/80 hover:bg-black text-white font-bold px-1.5 py-0.5 rounded shadow-sm transition-all backdrop-blur-sm" style="font-size: 9px; line-height: 1.2; letter-spacing: 0.3px; white-space: nowrap;">ANÚNCIO</a>
70                                            <a href="appbingol.php" id="banner-link">
71                            <img src="imagens/banners/appbingol.png" id="banner-img" alt="Banner" class="object-contain" style="height: 100%; max-width: 100%;">
72                        </a>
73                                    </div>
74                
75                <!-- Auth (Direita) -->
76                <div class="flex-shrink-0 flex items-center gap-3 header-auth">
77                                            <a href="login.php" class="header-btn-auth login">Entrar</a>
78                                    </div>
79            </div>
80        </div>
81    </div>
82
83    <!-- Script de Rotação de Banners -->
84    
84<script>
85    (function() {
86        const banners = [{"img":"imagens\/banners\/appbaudotesouro.png","link":"appbaudotesouro.php"},{"img":"imagens\/banners\/appbingol.png","link":"appbingol.php"},{"img":"imagens\/banners\/appboom.png","link":"appboom.php"}];
87        if (banners.length <= 1) return;
88        let idx = 1;
89        const img = document.getElementById('banner-img');
90        const link = document.getElementById('banner-link');
91        if (!img || !link) return;
92        setInterval(() => {
93            idx = (idx + 1) % banners.length;
94            img.style.opacity = '0.4';
95            setTimeout(() => { img.src = banners[idx].img; link.href = banners[idx].link; img.onload = () => img.style.opacity = '1'; }, 300);
96        }, 30000);
97    })();
98    </script>
98
99
100    <!-- LINHA 2: Menu -->
101    <nav class="header-line-2">
102        <div class="header-container">
103            <div class="header-menu">
104                <a href="index.php" class="nav-btn"><i class="fas fa-home"></i>INÍCIO</a>
105                <div class="dropdown">
106                    <button type="button" class="nav-btn dropdown-toggle" aria-haspopup="true" aria-expanded="false">
107						<i class="fas fa-gamepad"></i>
108						JOGOS						<i class="fas fa-chevron-down"></i>
109					</button>
110                    <div class="dropdown-menu">
111                                                    <a href="game.php" class="dropdown-item"><i class="fas fa-question-circle"></i>Quiz</a>
112                                                    <a href="jogodaforca.php" class="dropdown-item"><i class="fas fa-skull"></i>Jogo da Forca</a>
113                                                    <a href="jogo-da-velha.php" class="dropdown-item"><i class="fas fa-hashtag"></i>Jogo da Velha</a>
114                                                    <a href="memoria.php" class="dropdown-item"><i class="fas fa-brain"></i>Jogo da Memória</a>
115                                                    <a href="tesouro.php" class="dropdown-item"><i class="fas fa-gem"></i>O Tesouro Perdido</a>
116                                                    <a href="lotovouf.php" class="dropdown-item"><i class="fas fa-dice"></i>LotoVouF</a>
117                                                    <a href="pikclik.php" class="dropdown-item"><i class="fas fa-gamepad"></i>Pikclik</a>
118                                            </div>
119                </div>
120                <a href="ranking.php" class="nav-btn"><i class="fas fa-trophy"></i>RECORDISTAS</a>
121				<a href="blog.php" class="nav-btn"><i class="fas fa-newspaper"></i>BLOG</a>
122                <!-- MENU ESTUDOS (apenas para não-logados) -->
123<div class="dropdown" id="dropdown-estudos">
124    <button type="button" class="nav-btn dropdown-toggle" aria-haspopup="true" aria-expanded="false">
125        <i class="fas fa-book-open"></i>
126        ESTUDOS
127        <i class="fas fa-chevron-down"></i>
128    </button>
129    <div class="dropdown-menu dropdown-estudos-menu max-h-96 overflow-y-auto w-80">
130        <div class="p-2 text-xs font-semibold text-gray-500 uppercase tracking-wide border-b border-gray-100 mb-2">
131            <a href="categorias.php" title="Acessar Índice do Material de Estudo">Categorias</a>
132        </div>
133        <div id="estudos-categorias" class="space-y-1">
134                                            <div class="estudos-item has-children" data-target="cat-d50644ce86c9a41f2df998c259301409">
135                    <i class="fas fa-folder text-yellow-500"></i>
136                    <span>Artes</span>
137                    <span class="ml-auto text-xs text-gray-400">(3)</span>
138                </div>
139                                <div class="estudos-submenu hidden" id="cat-d50644ce86c9a41f2df998c259301409">
140                                        <div class="estudos-item has-children" data-target="sub-fd35aaa38a65a80b3dd3378ff56cba6e">
141                        <i class="fas fa-folder-open text-blue-400"></i>
142                        <span>Arquitetura</span>
143                        <span class="ml-auto text-xs text-gray-400">(1)</span>
144                    </div>
145                                        <div class="estudos-estudos-list hidden" id="sub-fd35aaa38a65a80b3dd3378ff56cba6e">
146                                                <a href="estudo.php?slug=arquitetura" 
147                           class="estudo-link" 
148                                                      title="Abrir estudo">
149                            📄 Arquitetura do Antigo ao Contemporâneo                        </a>
150                                            </div>
151                                                            <div class="estudos-item has-children" data-target="sub-e401bbe1fb7d9803fa5ec834d115cf0c">
152                        <i class="fas fa-folder-open text-blue-400"></i>
153                        <span>Artes</span>
154                        <span class="ml-auto text-xs text-gray-400">(1)</span>
155                    </div>
156                                        <div class="estudos-estudos-list hidden" id="sub-e401bbe1fb7d9803fa5ec834d115cf0c">
157                                                <a href="estudo.php?slug=estudodeartes" 
158                           class="estudo-link" 
159                                                      title="Abrir estudo">
160                            📄 Artes: do Renascimento ao Contemporâneo                        </a>
161                                            </div>
162                                                            <div class="estudos-item has-children" data-target="sub-3af4e864d35cd7b074cf95973d13c83a">
163                        <i class="fas fa-folder-open text-blue-400"></i>
164                        <span>Cores</span>
165                        <span class="ml-auto text-xs text-gray-400">(1)</span>
166                    </div>
167                                        <div class="estudos-estudos-list hidden" id="sub-3af4e864d35cd7b074cf95973d13c83a">
168                                                <a href="estudo.php?slug=artes_cores" 
169                           class="estudo-link" 
170                                                      title="Abrir estudo">
171                            📄 O Universo das Cores                        </a>
172                                            </div>
173                                                        </div>
174                                                <div class="estudos-item has-children" data-target="cat-9d2d69943cec1abc6df1d84dafa0665d">
175                    <i class="fas fa-folder text-yellow-500"></i>
176                    <span>Bem-Estar</span>
177                    <span class="ml-auto text-xs text-gray-400">(2)</span>
178                </div>
179                                <div class="estudos-submenu hidden" id="cat-9d2d69943cec1abc6df1d84dafa0665d">
180                                        <div class="estudos-item has-children" data-target="sub-f55087da88963b36f84ceed9a9a21d25">
181                        <i class="fas fa-folder-open text-blue-400"></i>
182                        <span>Educação Física</span>
183                        <span class="ml-auto text-xs text-gray-400">(1)</span>
184                    </div>
185                                        <div class="estudos-estudos-list hidden" id="sub-f55087da88963b36f84ceed9a9a21d25">
186                                                <a href="estudo.php?slug=bem_estar_exercicios" 
187                           class="estudo-link" 
188                                                      title="Abrir estudo">
189                            📄 Exercício Físico para o Bem-estar                        </a>
190                                            </div>
191                                                            <div class="estudos-item has-children" data-target="sub-e4273e9aa2527749fa83b30352e2b109">
192                        <i class="fas fa-folder-open text-blue-400"></i>
193                        <span>Psicologia</span>
194                        <span class="ml-auto text-xs text-gray-400">(1)</span>
195                    </div>
196                                        <div class="estudos-estudos-list hidden" id="sub-e4273e9aa2527749fa83b30352e2b109">
197                                                <a href="estudo.php?slug=bem_estar_psicologia" 
198                           class="estudo-link" 
199                                                      title="Abrir estudo">
200                            📄 Bem‑estar: Psicologia e Psicanálise                        </a>
201                                            </div>
202                                                        </div>
203                                                <div class="estudos-item has-children" data-target="cat-4aded46b16d834251ce480a54e16de64">
204                    <i class="fas fa-folder text-yellow-500"></i>
205                    <span>Ciências Exatas</span>
206                    <span class="ml-auto text-xs text-gray-400">(8)</span>
207                </div>
208                                <div class="estudos-submenu hidden" id="cat-4aded46b16d834251ce480a54e16de64">
209                                        <div class="estudos-item has-children" data-target="sub-df4ea133777399bb48927044b0169731">
210                        <i class="fas fa-folder-open text-blue-400"></i>
211                        <span>Astronomia</span>
212                        <span class="ml-auto text-xs text-gray-400">(1)</span>
213                    </div>
214                                        <div class="estudos-estudos-list hidden" id="sub-df4ea133777399bb48927044b0169731">
215                                                <a href="estudo.php?slug=astronomia" 
216                           class="estudo-link" 
217                                                      title="Abrir estudo">
218                            📄 Astronomia                        </a>
219                                            </div>
220                                                            <div class="estudos-item has-children" data-target="sub-eb4e2b194dd1c36d41457edaafd45442">
221                        <i class="fas fa-folder-open text-blue-400"></i>
222                        <span>Estatísticas</span>
223                        <span class="ml-auto text-xs text-gray-400">(1)</span>
224                    </div>
225                                        <div class="estudos-estudos-list hidden" id="sub-eb4e2b194dd1c36d41457edaafd45442">
226                                                <a href="estudo.php?slug=estatisticas" 
227                           class="estudo-link" 
228                                                      title="Abrir estudo">
229                            📄 Estatísticas                        </a>
230                                            </div>
231                                                            <div class="estudos-item has-children" data-target="sub-3afaea59d506ff58523ae6ca51bbe1d5">
232                        <i class="fas fa-folder-open text-blue-400"></i>
233                        <span>Física</span>
234                        <span class="ml-auto text-xs text-gray-400">(1)</span>
235                    </div>
236                                        <div class="estudos-estudos-list hidden" id="sub-3afaea59d506ff58523ae6ca51bbe1d5">
237                                                <a href="estudo.php?slug=omundo_dafisica" 
238                           class="estudo-link" 
239                                                      title="Abrir estudo">
240                            📄 O Mundo da Física - Conceitos Básicos e Aplicações                        </a>
241                                            </div>
242                                                            <div class="estudos-item has-children" data-target="sub-d199607c7147a0f3beafbb8864c198a0">
243                        <i class="fas fa-folder-open text-blue-400"></i>
244                        <span>Geologia</span>
245                        <span class="ml-auto text-xs text-gray-400">(1)</span>
246                    </div>
247                                        <div class="estudos-estudos-list hidden" id="sub-d199607c7147a0f3beafbb8864c198a0">
248                                                <a href="estudo.php?slug=geologia" 
249                           class="estudo-link" 
250                                                      title="Abrir estudo">
251                            📄 A Ciência Que Estuda a Terra                        </a>
252                                            </div>
253                                                            <div class="estudos-item has-children" data-target="sub-fc3b99082047c685df01a472e8d23af1">
254                        <i class="fas fa-folder-open text-blue-400"></i>
255                        <span>Matemática</span>
256                        <span class="ml-auto text-xs text-gray-400">(1)</span>
257                    </div>
258                                        <div class="estudos-estudos-list hidden" id="sub-fc3b99082047c685df01a472e8d23af1">
259                                                <a href="estudo.php?slug=matematica" 
260                           class="estudo-link" 
261                                                      title="Abrir estudo">
262                            📄 Matemática - A Linguagem da Ciência                        </a>
263                                            </div>
264                                                            <div class="estudos-item has-children" data-target="sub-2f50fffa42764a183f5ce3a8f8e56891">
265                        <i class="fas fa-folder-open text-blue-400"></i>
266                        <span>Matemática Básica</span>
267                        <span class="ml-auto text-xs text-gray-400">(1)</span>
268                    </div>
269                                        <div class="estudos-estudos-list hidden" id="sub-2f50fffa42764a183f5ce3a8f8e56891">
270                                                <a href="estudo.php?slug=matematica_basica" 
271                           class="estudo-link" 
272                                                      title="Abrir estudo">
273                            📄 Operações Básicas da Matemática                        </a>
274                                            </div>
275                                                            <div class="estudos-item has-children" data-target="sub-0f57f49203b246b09741697154c3d24f">
276                        <i class="fas fa-folder-open text-blue-400"></i>
277                        <span>Meteorologia</span>
278                        <span class="ml-auto text-xs text-gray-400">(1)</span>
279                    </div>
280                                        <div class="estudos-estudos-list hidden" id="sub-0f57f49203b246b09741697154c3d24f">
281                                                <a href="estudo.php?slug=meteorologia" 
282                           class="estudo-link" 
283                                                      title="Abrir estudo">
284                            📄 Clima e Fenômenos do Tempo                        </a>
285                                            </div>
286                                                            <div class="estudos-item has-children" data-target="sub-fbbdd8fa41d174943f31d8d650efae9b">
287                        <i class="fas fa-folder-open text-blue-400"></i>
288                        <span>Química</span>
289                        <span class="ml-auto text-xs text-gray-400">(1)</span>
290                    </div>
291                                        <div class="estudos-estudos-list hidden" id="sub-fbbdd8fa41d174943f31d8d650efae9b">
292                                                <a href="estudo.php?slug=quimica" 
293                           class="estudo-link" 
294                                                      title="Abrir estudo">
295                            📄 Ciência Que Transforma Matéria                        </a>
296                                            </div>
297                                                        </div>
298                                                <div class="estudos-item has-children" data-target="cat-3bafe2116e70ec2e8c8cddb944b0168b">
299                    <i class="fas fa-folder text-yellow-500"></i>
300                    <span>Ciências Naturais</span>
301                    <span class="ml-auto text-xs text-gray-400">(7)</span>
302                </div>
303                                <div class="estudos-submenu hidden" id="cat-3bafe2116e70ec2e8c8cddb944b0168b">
304                                        <div class="estudos-item has-children" data-target="sub-d2d146be42e33d7922779461d263b427">
305                        <i class="fas fa-folder-open text-blue-400"></i>
306                        <span>Biologia</span>
307                        <span class="ml-auto text-xs text-gray-400">(1)</span>
308                    </div>
309                                        <div class="estudos-estudos-list hidden" id="sub-d2d146be42e33d7922779461d263b427">
310                                                <a href="estudo.php?slug=cien_nat_biologia" 
311                           class="estudo-link" 
312                                                      title="Abrir estudo">
313                            📄 Vida e a Biologia                        </a>
314                                            </div>
315                                                            <div class="estudos-item has-children" data-target="sub-5ce8bce1199221751cd580f7d8da27fd">
316                        <i class="fas fa-folder-open text-blue-400"></i>
317                        <span>Botânica</span>
318                        <span class="ml-auto text-xs text-gray-400">(1)</span>
319                    </div>
320                                        <div class="estudos-estudos-list hidden" id="sub-5ce8bce1199221751cd580f7d8da27fd">
321                                                <a href="estudo.php?slug=botanica" 
322                           class="estudo-link" 
323                                                      title="Abrir estudo">
324                            📄 O Universo das Plantas                        </a>
325                                            </div>
326                                                            <div class="estudos-item has-children" data-target="sub-5c9dd0d7b701be81363c8b521b4a5876">
327                        <i class="fas fa-folder-open text-blue-400"></i>
328                        <span>Ecologia</span>
329                        <span class="ml-auto text-xs text-gray-400">(1)</span>
330                    </div>
331                                        <div class="estudos-estudos-list hidden" id="sub-5c9dd0d7b701be81363c8b521b4a5876">
332                                                <a href="estudo.php?slug=cien_nat_ecologia" 
333                           class="estudo-link" 
334                                                      title="Abrir estudo">
335                            📄 Meio Ambiente e Natureza                        </a>
336                                            </div>
337                                                            <div class="estudos-item has-children" data-target="sub-a7f48f5931ccf2256fb28064d8717f1e">
338                        <i class="fas fa-folder-open text-blue-400"></i>
339                        <span>Fauna Brasileira</span>
340                        <span class="ml-auto text-xs text-gray-400">(1)</span>
341                    </div>
342                                        <div class="estudos-estudos-list hidden" id="sub-a7f48f5931ccf2256fb28064d8717f1e">
343                                                <a href="estudo.php?slug=ciencias_naturais_fauna_brasileira" 
344                           class="estudo-link" 
345                                                      title="Abrir estudo">
346                            📄 Conhecendo a Fauna Brasileira                        </a>
347                                            </div>
348                                                            <div class="estudos-item has-children" data-target="sub-2782b101ae95244c0e89cad88a8533e6">
349                        <i class="fas fa-folder-open text-blue-400"></i>
350                        <span>Flora Brasileira</span>
351                        <span class="ml-auto text-xs text-gray-400">(1)</span>
352                    </div>
353                                        <div class="estudos-estudos-list hidden" id="sub-2782b101ae95244c0e89cad88a8533e6">
354                                                <a href="estudo.php?slug=ciencias_naturais_flora_brasileira" 
355                           class="estudo-link" 
356                                                      title="Abrir estudo">
357                            📄 Conhecendo a Flora Brasileira                        </a>
358                                            </div>
359                                                            <div class="estudos-item has-children" data-target="sub-6d04ac2b42dcd852c45ffed6cf5db5dd">
360                        <i class="fas fa-folder-open text-blue-400"></i>
361                        <span>Insetos</span>
362                        <span class="ml-auto text-xs text-gray-400">(1)</span>
363                    </div>
364                                        <div class="estudos-estudos-list hidden" id="sub-6d04ac2b42dcd852c45ffed6cf5db5dd">
365                                                <a href="estudo.php?slug=o_mundo_dos_insetos" 
366                           class="estudo-link" 
367                                                      title="Abrir estudo">
368                            📄 O Gigantesco Universo dos Insetos                        </a>
369                                            </div>
370                                                            <div class="estudos-item has-children" data-target="sub-e9dba4cecf00729a7f72780179b843be">
371                        <i class="fas fa-folder-open text-blue-400"></i>
372                        <span>Oceanografia</span>
373                        <span class="ml-auto text-xs text-gray-400">(1)</span>
374                    </div>
375                                        <div class="estudos-estudos-list hidden" id="sub-e9dba4cecf00729a7f72780179b843be">
376                                                <a href="estudo.php?slug=a_oceanografia" 
377                           class="estudo-link" 
378                                                      title="Abrir estudo">
379                            📄 A Oceanografia                        </a>
380                                            </div>
381                                                        </div>
382                                                <div class="estudos-item has-children" data-target="cat-6ab45b4acb36dc638dd0bf4e03533176">
383                    <i class="fas fa-folder text-yellow-500"></i>
384                    <span>História</span>
385                    <span class="ml-auto text-xs text-gray-400">(6)</span>
386                </div>
387                                <div class="estudos-submenu hidden" id="cat-6ab45b4acb36dc638dd0bf4e03533176">
388                                        <div class="estudos-item has-children" data-target="sub-79753882f889388a775673accc4582af">
389                        <i class="fas fa-folder-open text-blue-400"></i>
390                        <span>História do Brasil</span>
391                        <span class="ml-auto text-xs text-gray-400">(6)</span>
392                    </div>
393                                        <div class="estudos-estudos-list hidden" id="sub-79753882f889388a775673accc4582af">
394                                                <a href="estudo.php?slug=historia_do_brasil" 
395                           class="estudo-link" 
396                                                      title="Abrir estudo">
397                            📄 História do Brasil                        </a>
398                                                <a href="estudo.php?slug=historia_do_brasil_parte2" 
399                           class="estudo-link" 
400                                                      title="Abrir estudo">
401                            📄 História do Brasil - Parte 2                        </a>
402                                                <a href="estudo.php?slug=historia_do_brasil_parte3" 
403                           class="estudo-link" 
404                                                      title="Abrir estudo">
405                            📄 História do Brasil - Parte 3                        </a>
406                                                <a href="estudo.php?slug=historia_do_brasil_parte4" 
407                           class="estudo-link" 
408                                                      title="Abrir estudo">
409                            📄 História do Brasil - Parte 4                        </a>
410                                                <a href="estudo.php?slug=historia_do_brasil_parte5" 
411                           class="estudo-link" 
412                                                      title="Abrir estudo">
413                            📄 História do Brasil - Parte 5                        </a>
414                                                <a href="estudo.php?slug=historia_do_brasil_parte6" 
415                           class="estudo-link" 
416                                                      title="Abrir estudo">
417                            📄 História do Brasil - Parte 6                        </a>
418                                            </div>
419                                                        </div>
420                                                <div class="estudos-item has-children" data-target="cat-24c50a54f5cc1761a2fdea1e0da99cb9">
421                    <i class="fas fa-folder text-yellow-500"></i>
422                    <span>Literatura</span>
423                    <span class="ml-auto text-xs text-gray-400">(1)</span>
424                </div>
425                                <div class="estudos-submenu hidden" id="cat-24c50a54f5cc1761a2fdea1e0da99cb9">
426                                        <div class="estudos-item has-children" data-target="sub-196696bd02e0e248566157a47351667f">
427                        <i class="fas fa-folder-open text-blue-400"></i>
428                        <span>Brasileira</span>
429                        <span class="ml-auto text-xs text-gray-400">(1)</span>
430                    </div>
431                                        <div class="estudos-estudos-list hidden" id="sub-196696bd02e0e248566157a47351667f">
432                                                <a href="estudo.php?slug=literatura_brasileira" 
433                           class="estudo-link" 
434                                                      title="Abrir estudo">
435                            📄 Literatura Brasileira                        </a>
436                                            </div>
437                                                        </div>
438                                                    </div>
439    </div>
440</div>
441            </div>
442        </div>
443    </nav>
444
445 </header>
446
447   <!-- LINHA 3: Stats do Usuário (FIXA NO TOPO DESKTOP) -->
448    	
449<!-- ================= HEADER MOBILE (FIXO NO TOPO) ================= -->
450<div class="header-mobile">
451    <!-- Botão Menu (Esquerda) -->
452    <button id="mobile-menu-toggle" class="header-mobile-toggle" aria-label="Abrir menu"><i class="fas fa-bars text-lg"></i></button>
453    
454    <!-- Título da Página (Centro-Esquerda, após botão) -->
455    <div class="header-mobile-title">
456        <i class="fas fa-star text-blue-400 text-sm"></i>
457        <span class="font-semibold text-white truncate" title="Anuncie no VouF Games - Divulgue seu Produto para Milhares de Usuários">Anuncie no VouF...</span>
458    </div>
459    
460    <!-- Stats (Direita) -->
461    <div class="header-mobile-stats">
462                    <a href="login.php" class="header-mobile-auth login-btn">Entrar</a>
463            </div>
464</div>
465<!-- ================= BANNER MOBILE (Scrollável) ================ = -->
466<div class="header-banner-mobile md:hidden">
467    <div class="banner-mobile-container">
468		<!--a href="anuncie-noVouF.php" class="banner-mobile-label">anúncio</a-->
469        <a href="anuncie-noVouF.php" class="absolute top-0 left-0 z-20 bg-black-80 hover:bg-black text-white font-bold px-1.5 py-0.5 rounded shadow-sm transition-all backdrop-blur-sm" style="font-size: 9px; line-height: 1.2; letter-spacing: 0.3px; white-space: nowrap;">AD | anuncie</a>
470                    <a href="appbingol.php" class="banner-mobile-link">
471                <img src="imagens/banners/appbingol.png" 
472                     alt="Banner Mobile" 
473                     class="banner-mobile-img">
474            </a>
475            </div>
476</div>
477<!-- ================= MENU MOBILE ================= -->
478<div id="mobile-menu-overlay" class="mobile-menu-overlay"></div>
479<div id="mobile-menu-panel" class="mobile-menu-panel">
480    <div class="mobile-menu-header">
481        <h2 class="mobile-menu-title">Menu</h2>
482        <button id="mobile-menu-close" class="mobile-menu-close"><i class="fas fa-times text-xl"></i></button>
483    </div>
484    <nav class="mobile-menu-nav">
485        <a href="index.php" class="mobile-menu-item"><i class="fas fa-home"></i>INÍCIO</a>
486        
487        <div class="mobile-accordion">
488            <button class="mobile-accordion-header" aria-expanded="false" aria-controls="mobile-games-list">
489                <span class="flex items-center gap-3"><i class="fas fa-gamepad"></i> JOGOS</span>
490                <i class="fas fa-chevron-down text-xs transition-transform"></i>
491            </button>
492            <div id="mobile-games-list" class="mobile-accordion-content" aria-hidden="true">
493                                    <a href="game.php" class="mobile-accordion-item"><i class="fas fa-question-circle"></i>Quiz</a>
494                                    <a href="jogodaforca.php" class="mobile-accordion-item"><i class="fas fa-skull"></i>Jogo da Forca</a>
495                                    <a href="jogo-da-velha.php" class="mobile-accordion-item"><i class="fas fa-hashtag"></i>Jogo da Velha</a>
496                                    <a href="memoria.php" class="mobile-accordion-item"><i class="fas fa-brain"></i>Jogo da Memória</a>
497                                    <a href="tesouro.php" class="mobile-accordion-item"><i class="fas fa-gem"></i>O Tesouro Perdido</a>
498                                    <a href="lotovouf.php" class="mobile-accordion-item"><i class="fas fa-dice"></i>LotoVouF</a>
499                                    <a href="pikclik.php" class="mobile-accordion-item"><i class="fas fa-gamepad"></i>Pikclik</a>
500                            </div>
501        </div>
502        
503        <a href="ranking.php" class="mobile-menu-item"><i class="fas fa-trophy"></i>RECORDISTAS</a>
504        <a href="blog.php" class="mobile-menu-item"><i class="fas fa-newspaper"></i>BLOG</a>
505       <a href="categorias.php" class="mobile-menu-item"><i class="fas fa-book-open"></i>ESTUDOS</a>
506		
507                
508                    <div class="mobile-menu-footer"><a href="login.php" class="mobile-login-btn">Fazer Login</a></div>
509            </nav>
510</div>
511
512<!-- ================= CONTEÚDO PRINCIPAL ================= -->
513<main class="max-w-2xl mx-auto p-3 rounded-xl shadow-2xl">
514
515<!-- Schema.org para Produto/Oferta -->
516<script type="application/ld+json">
517{
518  "@context": "https://schema.org",
519  "@type": "Product",
520  "name": "Espaço Publicitário - VouF Games",
521  "description": "Banner no topo do site + página dedicada para divulgar seu produto ou serviço",
522  "brand": {
523    "@type": "Brand",
524    "name": "VouF Games"
525  },
526  "offers": {
527    "@type": "Offer",
528    "price": "29.90",
529    "priceCurrency": "BRL",
530    "availability": "https://schema.org/InStock",
531    "seller": {
532      "@type": "Organization",
533      "name": "VouF Games"
534    }
535  }
536}
537</script>
537
538
539<style>
540/* ===== TEMA DA PÁGINA DE VENDAS ===== */
541:root {
542    --brand-primary: #3b82f6;
543    --brand-secondary: #fbbf24;
544    --brand-dark: #0f172a;
545    --brand-light: #f8fafc;
546    --success: #22c55e;
547    --warning: #f59e0b;
548}
549
550body {
551    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
552    background: var(--brand-light);
553    color: #1e293b;
554    line-height: 1.7;
555}
556
557/* Hero Section */
558.hero-vendas {
559    background: linear-gradient(135deg, var(--brand-dark) 0%, #1e293b 100%);
560    color: white;
561    padding: 4rem 1rem 6rem;
562    position: relative;
563    overflow: hidden;
564}
565
566.hero-vendas::before {
567    content: '';
568    position: absolute;
569    top: -50%;
570    right: -20%;
571    width: 600px;
572    height: 600px;
573    background: radial-gradient(circle, rgba(59,130,246,0.2) 0%, transparent 70%);
574    border-radius: 50%;
575    animation: pulse 4s ease-in-out infinite;
576}
577
578@keyframes pulse {
579    0%, 100% { opacity: 0.3; transform: scale(1); }
580    50% { opacity: 0.5; transform: scale(1.1); }
581}
582
583.hero-content {
584    max-width: 1200px;
585    margin: 0 auto;
586    position: relative;
587    z-index: 1;
588    text-align: center;
589}
590
591.hero-badge {
592    display: inline-flex;
593    align-items: center;
594    gap: 0.5rem;
595    background: rgba(251, 191, 36, 0.2);
596    color: var(--brand-secondary);
597    padding: 0.5rem 1rem;
598    border-radius: 9999px;
599    font-size: 0.875rem;
600    font-weight: 600;
601    margin-bottom: 1.5rem;
602    border: 1px solid var(--brand-secondary);
603}
604
605.hero-title {
606    font-size: 2.5rem;
607    font-weight: 800;
608    margin-bottom: 1rem;
609    line-height: 1.2;
610}
611
612.hero-title span {
613    color: var(--brand-secondary);
614}
615
616.hero-subtitle {
617    font-size: 1.25rem;
618    color: #94a3b8;
619    max-width: 700px;
620    margin: 0 auto 2rem;
621}
622
623/* Cards de Navegação Rápida */
624.nav-cards {
625    display: grid;
626    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
627    gap: 1rem;
628    max-width: 1200px;
629    margin: -3rem auto 3rem;
630    padding: 0 1rem;
631    position: relative;
632    z-index: 10;
633}
634
635.nav-card {
636    background: white;
637    padding: 1.5rem;
638    border-radius: 1rem;
639    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
640    text-align: center;
641    transition: all 0.3s ease;
642    cursor: pointer;
643    border: 2px solid transparent;
644}
645
646.nav-card:hover {
647    transform: translateY(-4px);
648    border-color: var(--brand-primary);
649    box-shadow: 0 20px 60px rgba(59,130,246,0.2);
650}
651
652.nav-card i {
653    font-size: 2rem;
654    color: var(--brand-primary);
655    margin-bottom: 0.75rem;
656}
657
658.nav-card h4 {
659    font-weight: 600;
660    color: #1e293b;
661    margin-bottom: 0.25rem;
662}
663
664.nav-card p {
665    font-size: 0.875rem;
666    color: #64748b;
667}
668
669/* Seções de Conteúdo */
670.section-vendas {
671    padding: 4rem 1rem;
672    max-width: 1200px;
673    margin: 0 auto;
674}
675
676.section-title {
677    text-align: center;
678    font-size: 2rem;
679    font-weight: 700;
680    color: var(--brand-dark);
681    margin-bottom: 3rem;
682    position: relative;
683}
684
685.section-title::after {
686    content: '';
687    display: block;
688    width: 80px;
689    height: 4px;
690    background: var(--brand-secondary);
691    margin: 1rem auto 0;
692    border-radius: 2px;
693}
694
695/* Cards de Vantagens */
696.vantagens-grid {
697    display: grid;
698    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
699    gap: 1.5rem;
700}
701
702.vantagem-card {
703    background: white;
704    padding: 2rem;
705    border-radius: 1rem;
706    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
707    border-left: 4px solid var(--brand-primary);
708    transition: transform 0.3s;
709}
710
711.vantagem-card:hover {
712    transform: translateX(4px);
713}
714
715.vantagem-card i {
716    font-size: 2rem;
717    color: var(--brand-primary);
718    margin-bottom: 1rem;
719}
720
721.vantagem-card h4 {
722    font-weight: 600;
723    margin-bottom: 0.5rem;
724    color: #1e293b;
725}
726
727.vantagem-card p {
728    color: #64748b;
729    font-size: 0.95rem;
730}
731
732/* Como Funciona - Timeline */
733.como-funciona {
734    background: white;
735    border-radius: 1.5rem;
736    padding: 2rem;
737    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
738}
739
740.timeline {
741    position: relative;
742    padding-left: 2rem;
743}
744
745.timeline::before {
746    content: '';
747    position: absolute;
748    left: 0.5rem;
749    top: 0;
750    bottom: 0;
751    width: 2px;
752    background: var(--brand-primary);
753}
754
755.timeline-item {
756    position: relative;
757    padding-bottom: 2rem;
758}
759
760.timeline-item::before {
761    content: '';
762    position: absolute;
763    left: -1.35rem;
764    top: 0.25rem;
765    width: 1rem;
766    height: 1rem;
767    background: var(--brand-primary);
768    border-radius: 50%;
769    border: 3px solid white;
770    box-shadow: 0 0 0 2px var(--brand-primary);
771}
772
773.timeline-number {
774    display: inline-flex;
775    align-items: center;
776    justify-content: center;
777    width: 2rem;
778    height: 2rem;
779    background: var(--brand-primary);
780    color: white;
781    border-radius: 50%;
782    font-weight: 700;
783    font-size: 0.875rem;
784    margin-right: 0.75rem;
785}
786
787.timeline-item h4 {
788    font-weight: 600;
789    margin-bottom: 0.5rem;
790    color: #1e293b;
791}
792
793.timeline-item p {
794    color: #64748b;
795    margin-left: 2.75rem;
796}
797
798/* Públicos Atendidos */
799.publicos-grid {
800    display: grid;
801    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
802    gap: 1.5rem;
803}
804
805.publico-card {
806    text-align: center;
807    padding: 1.5rem;
808    background: white;
809    border-radius: 1rem;
810    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
811    transition: all 0.3s;
812}
813
814.publico-card:hover {
815    transform: translateY(-4px);
816    box-shadow: 0 12px 40px rgba(59,130,246,0.15);
817}
818
819.publico-icon {
820    width: 60px;
821    height: 60px;
822    background: linear-gradient(135deg, var(--brand-primary), #60a5fa);
823    border-radius: 50%;
824    display: flex;
825    align-items: center;
826    justify-content: center;
827    margin: 0 auto 1rem;
828    color: white;
829    font-size: 1.5rem;
830}
831
832.publico-card h4 {
833    font-weight: 600;
834    margin-bottom: 0.5rem;
835    color: #1e293b;
836}
837
838.publico-card p {
839    font-size: 0.875rem;
840    color: #64748b;
841}
842
843/* O Que Você Recebe */
844.entrega-grid {
845    display: grid;
846    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
847    gap: 2rem;
848}
849
850.entrega-card {
851    background: white;
852    border-radius: 1.5rem;
853    overflow: hidden;
854    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
855    border: 2px solid var(--brand-primary);
856}
857
858.entrega-header {
859    background: linear-gradient(135deg, var(--brand-primary), #60a5fa);
860    color: white;
861    padding: 1.5rem;
862    text-align: center;
863}
864
865.entrega-header i {
866    font-size: 2.5rem;
867    margin-bottom: 0.75rem;
868}
869
870.entrega-header h4 {
871    font-size: 1.25rem;
872    font-weight: 700;
873}
874
875.entrega-body {
876    padding: 1.5rem;
877}
878
879.entrega-body ul {
880    list-style: none;
881    padding: 0;
882}
883
884.entrega-body li {
885    padding: 0.5rem 0;
886    border-bottom: 1px dashed #e2e8f0;
887    display: flex;
888    align-items: center;
889    gap: 0.5rem;
890    color: #475569;
891}
892
893.entrega-body li:last-child {
894    border-bottom: none;
895}
896
897.entrega-body li i {
898    color: var(--success);
899    font-size: 1.1rem;
900}
901
902/* Oferta Especial */
903.oferta-box {
904    background: linear-gradient(135deg, var(--brand-dark), #1e293b);
905    color: white;
906    border-radius: 2rem;
907    padding: 3rem;
908    text-align: center;
909    position: relative;
910    overflow: hidden;
911    border: 3px solid var(--brand-secondary);
912}
913
914.oferta-box::before {
915    content: 'OFERTA';
916    position: absolute;
917    top: 1rem;
918    right: -3rem;
919    background: var(--brand-secondary);
920    color: var(--brand-dark);
921    padding: 0.5rem 4rem;
922    font-weight: 800;
923    font-size: 0.875rem;
924    transform: rotate(45deg);
925    letter-spacing: 2px;
926}
927
928.oferta-preco {
929    margin: 2rem 0;
930}
931
932.oferta-preco .original {
933    font-size: 1.5rem;
934    color: #94a3b8;
935    text-decoration: line-through;
936    margin-bottom: 0.5rem;
937}
938
939.oferta-preco .promocional {
940    font-size: 4rem;
941    font-weight: 800;
942    color: var(--brand-secondary);
943    line-height: 1;
944}
945
946.oferta-preco .moeda {
947    font-size: 2rem;
948    vertical-align: super;
949    margin-right: 0.25rem;
950}
951
952.oferta-preco .periodo {
953    font-size: 1rem;
954    color: #94a3b8;
955    margin-top: 0.5rem;
956}
957
958.oferta-vagas {
959    background: rgba(251, 191, 36, 0.2);
960    color: var(--brand-secondary);
961    padding: 0.75rem 1.5rem;
962    border-radius: 9999px;
963    display: inline-flex;
964    align-items: center;
965    gap: 0.5rem;
966    font-weight: 600;
967    margin-bottom: 2rem;
968}
969
970.oferta-cta {
971    background: var(--brand-secondary);
972    color: var(--brand-dark);
973    border: none;
974    padding: 1rem 3rem;
975    border-radius: 9999px;
976    font-size: 1.125rem;
977    font-weight: 700;
978    cursor: pointer;
979    transition: all 0.3s;
980    display: inline-flex;
981    align-items: center;
982    gap: 0.75rem;
983    text-decoration: none;
984}
985
986.oferta-cta:hover {
987    transform: scale(1.05);
988    box-shadow: 0 10px 40px rgba(251, 191, 36, 0.4);
989}
990
991.oferta-cta i {
992    font-size: 1.25rem;
993}
994
995/* Depoimentos (Opcional) */
996.depoimentos-grid {
997    display: grid;
998    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
999    gap: 1.5rem;
1000}
1001
1002.depoimento-card {
1003    background: white;
1004    padding: 2rem;
1005    border-radius: 1rem;
1006    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
1007    border-left: 4px solid var(--brand-secondary);
1008}
1009
1010.depoimento-header {
1011    display: flex;
1012    align-items: center;
1013    gap: 1rem;
1014    margin-bottom: 1rem;
1015}
1016
1017.depoimento-avatar {
1018    width: 50px;
1019    height: 50px;
1020    background: linear-gradient(135deg, var(--brand-primary), #60a5fa);
1021    border-radius: 50%;
1022    display: flex;
1023    align-items: center;
1024    justify-content: center;
1025    color: white;
1026    font-weight: 700;
1027}
1028
1029.depoimento-nome {
1030    font-weight: 600;
1031    color: #1e293b;
1032}
1033
1034.depoimento-empresa {
1035    font-size: 0.875rem;
1036    color: #64748b;
1037}
1038
1039.depoimento-texto {
1040    color: #475569;
1041    font-style: italic;
1042    line-height: 1.6;
1043}
1044
1045/* FAQ */
1046.faq-vendas {
1047    max-width: 800px;
1048    margin: 0 auto;
1049}
1050
1051.faq-item {
1052    background: white;
1053    border-radius: 1rem;
1054    margin-bottom: 1rem;
1055    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
1056    overflow: hidden;
1057}
1058
1059.faq-item summary {
1060    padding: 1.25rem 1.5rem;
1061    cursor: pointer;
1062    font-weight: 600;
1063    color: #1e293b;
1064    list-style: none;
1065    display: flex;
1066    justify-content: space-between;
1067    align-items: center;
1068    transition: background 0.2s;
1069}
1070
1071.faq-item summary:hover {
1072    background: #f8fafc;
1073}
1074
1075.faq-item summary::after {
1076    content: '+';
1077    font-size: 1.5rem;
1078    color: var(--brand-primary);
1079    transition: transform 0.3s;
1080}
1081
1082.faq-item[open] summary::after {
1083    content: '−';
1084    transform: rotate(180deg);
1085}
1086
1087.faq-item p {
1088    padding: 0 1.5rem 1.5rem;
1089    color: #64748b;
1090    line-height: 1.7;
1091    border-top: 1px solid #e2e8f0;
1092    margin-top: 0.5rem;
1093    padding-top: 1rem;
1094}
1095
1096/* Card Flutuante de Contato */
1097.card-flutuante {
1098    position: fixed;
1099    bottom: 1.5rem;
1100    right: 1.5rem;
1101    background: linear-gradient(135deg, var(--brand-primary), #60a5fa);
1102    color: white;
1103    padding: 1rem 1.5rem;
1104    border-radius: 1rem;
1105    box-shadow: 0 10px 40px rgba(59,130,246,0.4);
1106    display: flex;
1107    align-items: center;
1108    gap: 0.75rem;
1109    z-index: 1000;
1110    transition: all 0.3s;
1111    text-decoration: none;
1112    max-width: 280px;
1113    animation: slideInRight 0.5s ease-out;
1114}
1115
1116@keyframes slideInRight {
1117    from {
1118        opacity: 0;
1119        transform: translateX(100px);
1120    }
1121    to {
1122        opacity: 1;
1123        transform: translateX(0);
1124    }
1125}
1126
1127.card-flutuante:hover {
1128    transform: translateY(-4px);
1129    box-shadow: 0 16px 60px rgba(59,130,246,0.6);
1130}
1131
1132.card-flutuante i {
1133    font-size: 1.5rem;
1134}
1135
1136.card-flutuante-text {
1137    font-weight: 600;
1138    font-size: 0.95rem;
1139}
1140
1141.card-flutuante-sub {
1142    display: block;
1143    font-size: 0.8rem;
1144    opacity: 0.9;
1145    margin-top: 0.125rem;
1146}
1147
1148/* Responsivo */
1149@media (max-width: 768px) {
1150    .hero-title {
1151        font-size: 2rem;
1152    }
1153    
1154    .hero-subtitle {
1155        font-size: 1.1rem;
1156    }
1157    
1158    .nav-cards {
1159        grid-template-columns: repeat(2, 1fr);
1160        margin-top: -2rem;
1161    }
1162    
1163    .oferta-preco .promocional {
1164        font-size: 3rem;
1165    }
1166    
1167    .card-flutuante {
1168        bottom: 1rem;
1169        right: 1rem;
1170        left: 1rem;
1171        max-width: none;
1172        justify-content: center;
1173    }
1174    
1175    .section-vendas {
1176        padding: 3rem 1rem;
1177    }
1178}
1179
1180/* Animações de Scroll */
1181[data-animate] {
1182    opacity: 0;
1183    transform: translateY(20px);
1184    transition: opacity 0.6s ease, transform 0.6s ease;
1185}
1186
1187[data-animate].visible {
1188    opacity: 1;
1189    transform: translateY(0);
1190}
1191</style>
1192
1193<!-- Hero Section -->
1194<section class="hero-vendas">
1195    <div class="hero-content">
1196        <div class="hero-badge">
1197            <i class="fas fa-bolt"></i>
1198            Oferta por Tempo Limitado
1199        </div>
1200        <h1 class="hero-title">
1201            Divulgue sua Marca para <span>Milhares de Usuários</span>
1202        </h1>
1203        <p class="hero-subtitle">
1204            Banner no topo do VouF Games + página dedicada de apresentação. 
1205            Alcance jogadores engajados e converta visitantes em clientes.
1206        </p>
1207        <a href="#oferta" class="oferta-cta" style="background: white; color: var(--brand-primary);">
1208            <i class="fas fa-arrow-down"></i>
1209            Ver Oferta Especial
1210        </a>
1211    </div>
1212</section>
1213
1214<!-- Cards de Navegação Rápida -->
1215<nav class="nav-cards">
1216    <a href="#vantagens" class="nav-card" data-animate>
1217        <i class="fas fa-star"></i>
1218        <h4>Vantagens</h4>
1219        <p>Por que anunciar aqui?</p>
1220    </a>
1221    <a href="#como-funciona" class="nav-card" data-animate>
1222        <i class="fas fa-cogs"></i>
1223        <h4>Como Funciona</h4>
1224        <p>Passo a passo simples</p>
1225    </a>
1226    <a href="#publicos" class="nav-card" data-animate>
1227        <i class="fas fa-users"></i>
1228        <h4>Públicos</h4>
1229        <p>Quem você alcança</p>
1230    </a>
1231    <a href="#entrega" class="nav-card" data-animate>
1232        <i class="fas fa-gift"></i>
1233        <h4>O Que Recebe</h4>
1234        <p>Entregáveis inclusos</p>
1235    </a>
1236    <a href="#oferta" class="nav-card" data-animate>
1237        <i class="fas fa-tag"></i>
1238        <h4>Oferta</h4>
1239        <p>Preço promocional</p>
1240    </a>
1241    <a href="#faq" class="nav-card" data-animate>
1242        <i class="fas fa-question-circle"></i>
1243        <h4>Dúvidas</h4>
1244        <p>Perguntas frequentes</p>
1245    </a>
1246</nav>
1247
1248<!-- Vantagens de Anunciar -->
1249<section id="vantagens" class="section-vendas" data-animate>
1250    <h2 class="section-title">✨ Por Que Anunciar no VouF Games?</h2>
1251    <div class="vantagens-grid">
1252        <div class="vantagem-card">
1253            <i class="fas fa-bullseye"></i>
1254            <h4>Público Engajado</h4>
1255            <p>Nossos usuários são ativos, curiosos e buscam conteúdo de qualidade. Ideal para marcas que querem impacto real.</p>
1256        </div>
1257        <div class="vantagem-card">
1258            <i class="fas fa-shield-alt"></i>
1259            <h4>Ambiente Seguro</h4>
1260            <p>Seu anúncio aparece em um ambiente familiar, educativo e moderado. Sem conteúdo inadequado ao lado da sua marca.</p>
1261        </div>
1262        <div class="vantagem-card">
1263            <i class="fas fa-mobile-alt"></i>
1264            <h4>100% Responsivo</h4>
1265            <p>Seu banner e página de divulgação funcionam perfeitamente em celular, tablet e desktop. Alcance todos os dispositivos.</p>
1266        </div>
1267        <div class="vantagem-card">
1268            <i class="fas fa-chart-line"></i>
1269            <h4>Alta Visibilidade</h4>
1270            <p>Banner fixo no topo de todas as páginas + página dedicada com SEO otimizado. Sua marca sempre em destaque.</p>
1271        </div>
1272    </div>
1273</section>
1274
1275<!-- Como Funciona -->
1276<section id="como-funciona" class="section-vendas" style="background: #f8fafc;" data-animate>
1277    <h2 class="section-title">🔄 Como Funciona</h2>
1278    <div class="como-funciona">
1279        <div class="timeline">
1280            <div class="timeline-item">
1281                <span class="timeline-number">1</span>
1282                <h4>Entre em Contato</h4>
1283                <p>Preencha nosso formulário ou clique no card flutuante. Nossa equipe entrará em contato em até 24h úteis.</p>
1284            </div>
1285            <div class="timeline-item">
1286                <span class="timeline-number">2</span>
1287                <h4>Envie seu Material</h4>
1288                <p>Nos envie a arte do banner (ou peça nossa ajuda para criar) e o conteúdo da sua página de divulgação.</p>
1289            </div>
1290            <div class="timeline-item">
1291                <span class="timeline-number">3</span>
1292                <h4>Aprovação Rápida</h4>
1293                <p>Revisamos seu material em até 48h para garantir qualidade e conformidade. Ajustes são feitos em parceria com você.</p>
1294            </div>
1295            <div class="timeline-item">
1296                <span class="timeline-number">4</span>
1297                <h4>Publicação Imediata</h4>
1298                <p>Seu banner vai ao ar no topo do site e sua página de divulgação fica disponível para milhares de visitantes.</p>
1299            </div>
1300            <div class="timeline-item">
1301                <span class="timeline-number">5</span>
1302                <h4>Acompanhe Resultados</h4>
1303                <p>Receba relatórios mensais de visualizações e cliques. Otimizamos juntos para maximizar seu retorno.</p>
1304            </div>
1305        </div>
1306    </div>
1307</section>
1308
1309<!-- Públicos Atendidos -->
1310<section id="publicos" class="section-vendas" data-animate>
1311    <h2 class="section-title">🎯 Para Quem é Esta Oportunidade?</h2>
1312    <p class="text-center text-gray-600 mb-8 max-w-3xl mx-auto">
1313        Nosso espaço publicitário é perfeito para diversos segmentos. Veja se o seu se encaixa:
1314    </p>
1315    <div class="publicos-grid">
1316        <div class="publico-card">
1317            <div class="publico-icon">
1318                <i class="fas fa-box-open"></i>
1319            </div>
1320            <h4>Produtos Físicos</h4>
1321            <p>E-commerce, lojas online, lançamentos e promoções.</p>
1322        </div>
1323        <div class="publico-card">
1324            <div class="publico-icon">
1325                <i class="fas fa-laptop-code"></i>
1326            </div>
1327            <h4>Serviços Digitais</h4>
1328            <p>Apps, SaaS, cursos online, consultorias e ferramentas.</p>
1329        </div>
1330        <div class="publico-card">
1331            <div class="publico-icon">
1332                <i class="fas fa-user-tie"></i>
1333            </div>
1334            <h4>Profissionais</h4>
1335            <p>Coaches, influencers, criadores de conteúdo e freelancers.</p>
1336        </div>
1337        <div class="publico-card">
1338            <div class="publico-icon">
1339                <i class="fas fa-heart"></i>
1340            </div>
1341            <h4>Redes Sociais</h4>
1342            <p>Perfis no Instagram, TikTok, YouTube e comunidades online.</p>
1343        </div>
1344        <div class="publico-card">
1345            <div class="publico-icon">
1346                <i class="fas fa-gamepad"></i>
1347            </div>
1348            <h4>Jogos e Apps</h4>
1349            <p>Lançamentos, atualizações, eventos e comunidades gamer.</p>
1350        </div>
1351        <div class="publico-card">
1352            <div class="publico-icon">
1353                <i class="fas fa-graduation-cap"></i>
1354            </div>
1355            <h4>Educação</h4>
1356            <p>Cursos, materiais didáticos, plataformas de ensino e tutoriais.</p>
1357        </div>
1358    </div>
1359</section>
1360
1361<!-- O Que Você Recebe -->
1362<section id="entrega" class="section-vendas" style="background: #f8fafc;" data-animate>
1363    <h2 class="section-title">📦 O Que Está Incluso no Pacote</h2>
1364    <div class="entrega-grid">
1365        <div class="entrega-card">
1366            <div class="entrega-header">
1367                <i class="fas fa-ad"></i>
1368                <h4>Banner no Header</h4>
1369            </div>
1370            <div class="entrega-body">
1371                <ul>
1372                    <li><i class="fas fa-check"></i> Posição fixa no topo de TODAS as páginas</li>
1373                    <li><i class="fas fa-check"></i> Link direto para seu site/landing page</li>
1374                    <li><i class="fas fa-check"></i> Exibição em desktop, tablet e mobile</li>
1375                    <li><i class="fas fa-check"></i> Rotação com outros banners (máx. 15 por vez)</li>
1376                    <li><i class="fas fa-check"></i> Suporte para ajuste de arte (se necessário)</li>
1377                </ul>
1378            </div>
1379        </div>
1380        <div class="entrega-card">
1381            <div class="entrega-header">
1382                <i class="fas fa-file-alt"></i>
1383                <h4>Página Dedicada</h4>
1384            </div>
1385            <div class="entrega-body">
1386                <ul>
1387                    <li><i class="fas fa-check"></i> Página exclusiva no domínio vouf.com.br</li>
1388                    <li><i class="fas fa-check"></i> SEO otimizado para buscadores</li>
1389                    <li><i class="fas fa-check"></i> Design responsivo e profissional</li>
1390                    <li><i class="fas fa-check"></i> Links para suas redes sociais e site</li>
1391                    <li><i class="fas fa-check"></i> Atualizações de conteúdo inclusas (1x/mês)</li>
1392                </ul>
1393            </div>
1394        </div>
1395        <div class="entrega-card">
1396            <div class="entrega-header">
1397                <i class="fas fa-chart-bar"></i>
1398                <h4>Bônus Exclusivos</h4>
1399            </div>
1400            <div class="entrega-body">
1401                <ul>
1402                    <li><i class="fas fa-check"></i> Relatório mensal de métricas (visualizações/cliques)</li>
1403                    <li><i class="fas fa-check"></i> Destaque em nossas newsletters (opcional)</li>
1404                    <li><i class="fas fa-check"></i> Menção em nossas redes sociais (para os 50 primeiros)</li>
1405                    <li><i class="fas fa-check"></i> Prioridade no suporte técnico</li>
1406                    <li><i class="fas fa-check"></i> Renovação com desconto para clientes fiéis</li>
1407                </ul>
1408            </div>
1409        </div>
1410    </div>
1411</section>
1412
1413<!-- Oferta Especial -->
1414<section id="oferta" class="section-vendas" data-animate>
1415    <div class="oferta-box">
1416        <h3 style="font-size: 1.75rem; font-weight: 700; margin-bottom: 1rem;">🔥 Oferta de Lançamento</h3>
1417        <p style="color: #94a3b8; margin-bottom: 2rem;">
1418            Garanta seu espaço com preço promocional exclusivo para os primeiros anunciantes.
1419        </p>
1420        
1421        <div class="oferta-preco">
1422            <div class="original">De <span class="moeda">R$</span>199,90</div>
1423            <div class="promocional">
1424                <span class="moeda">R$</span>29,90            </div>
1425            <div class="periodo">/ mês • Cobrança mensal • Cancele quando quiser</div>
1426        </div>
1427        
1428        <div class="oferta-vagas">
1429            <i class="fas fa-fire"></i>
1430            Apenas 100 vagas restantes neste preço!
1431        </div>
1432        
1433        <a href="contato.php?assunto=Anúncio+no+VouF" class="oferta-cta">
1434            <i class="fas fa-whatsapp"></i>
1435            Quero Garantir Minha Vaga
1436        </a>
1437        
1438        <p style="margin-top: 1.5rem; font-size: 0.875rem; opacity: 0.8;">
1439            <i class="fas fa-shield-alt"></i> Pagamento seguro • Suporte em português • Sem fidelidade
1440        </p>
1441    </div>
1442</section>
1443
1444<!-- Depoimentos (Opcional - Preencher com reais depois) -->
1445<section class="section-vendas" style="background: #f8fafc;" data-animate>
1446    <h2 class="section-title">💬 O Que Nossos Anunciantes Dizem</h2>
1447    <div class="depoimentos-grid">
1448        <div class="depoimento-card">
1449            <div class="depoimento-header">
1450                <div class="depoimento-avatar">MC</div>
1451                <div>
1452                    <div class="depoimento-nome">Marina C.</div>
1453                    <div class="depoimento-empresa">Loja de Games Online</div>
1454                </div>
1455            </div>
1456            <p class="depoimento-texto">
1457                "Anunciar no VouF foi uma das melhores decisões para minha loja. Em 30 dias, tive um aumento de 40% nas visitas vindas do site. O suporte foi excelente!"
1458            </p>
1459        </div>
1460        <div class="depoimento-card">
1461            <div class="depoimento-header">
1462                <div class="depoimento-avatar">RP</div>
1463                <div>
1464                    <div class="depoimento-nome">Rafael P.</div>
1465                    <div class="depoimento-empresa">Curso de Programação</div>
1466                </div>
1467            </div>
1468            <p class="depoimento-texto">
1469                "O público do VouF é exatamente o perfil que eu buscava: jovens interessados em aprendizado e tecnologia. As inscrições do meu curso aumentaram significativamente."
1470            </p>
1471        </div>
1472        <div class="depoimento-card">
1473            <div class="depoimento-header">
1474                <div class="depoimento-avatar">AS</div>
1475                <div>
1476                    <div class="depoimento-nome">Ana S.</div>
1477                    <div class="depoimento-empresa">Influencer Digital</div>
1478                </div>
1479            </div>
1480            <p class="depoimento-texto">
1481                "A página dedicada no VouF me ajudou a profissionalizar minha presença online. Recebi vários convites de parceria depois que anunciei aqui. Recomendo!"
1482            </p>
1483        </div>
1484    </div>
1485</section>
1486
1487<!-- FAQ -->
1488<section id="faq" class="section-vendas" data-animate>
1489    <h2 class="section-title">❓ Perguntas Frequentes</h2>
1490    <div class="faq-vendas">
1491        <details class="faq-item">
1492            <summary>Preciso ter uma arte pronta para o banner?</summary>
1493            <p>Não! Se você não tiver uma arte, nossa equipe pode criar uma versão básica gratuitamente para os primeiros 50 anunciantes. Para artes mais elaboradas, indicamos parceiros ou você pode enviar sua própria arte nas dimensões 468x60px ou 728x90px.</p>
1494        </details>
1495        <details class="faq-item">
1496            <summary>Como é feita a cobrança?</summary>
1497            <p>A cobrança é mensal, via PIX ou cartão de crédito. Você recebe uma fatura no início de cada ciclo e pode cancelar a qualquer momento, sem multa ou fidelidade.</p>
1498        </details>
1499        <details class="faq-item">
1500            <summary>Posso alterar o conteúdo da minha página depois de publicada?</summary>
1501            <p>Sim! Incluímos 1 atualização de conteúdo por mês sem custo adicional. Para alterações mais frequentes, oferecemos planos personalizados. Basta nos enviar o novo conteúdo que atualizamos em até 48h.</p>
1502        </details>
1503        <details class="faq-item">
1504            <summary>Como acompanho os resultados do meu anúncio?</summary>
1505            <p>Todo mês você recebe um relatório por e-mail com: número de visualizações do banner, cliques recebidos, taxa de conversão estimada e sugestões de otimização. Também disponibilizamos um painel online para consulta em tempo real (em desenvolvimento).</p>
1506        </details>
1507        <details class="faq-item">
1508            <summary>
1508E se eu quiser anunciar por mais de um mês?</summary>
1509            <p>Oferecemos descontos progressivos para contratos trimestrais (5% off), semestrais (10% off) e anuais (20% off). Fale com nossa equipe para montar um plano sob medida para sua necessidade.</p>
1510        </details>
1511    </div>
1512</section>
1513
1514<!-- CTA Final -->
1515<section class="section-vendas" style="text-align: center; background: linear-gradient(135deg, var(--brand-primary), #60a5fa); color: white; border-radius: 2rem; margin: 2rem auto; max-width: 1200px;" data-animate>
1516    <h3 style="font-size: 1.75rem; font-weight: 700; margin-bottom: 1rem;">🚀 Pronto para Alavancar sua Divulgação?</h3>
1517    <p style="margin-bottom: 2rem; opacity: 0.95; max-width: 600px; margin-left: auto; margin-right: auto;">
1518        Não perca esta oportunidade única. Garanta seu espaço no VouF Games antes que as vagas promocionais acabem!
1519    </p>
1520    <a href="contato.php?assunto=Anúncio+no+VouF" class="oferta-cta" style="background: white; color: var(--brand-primary);">
1521        <i class="fas fa-paper-plane"></i>
1522        Falar com Nossa Equipe Agora
1523    </a>
1524    <p style="margin-top: 1.5rem; font-size: 0.875rem; opacity: 0.8;">
1525        <i class="fas fa-clock"></i> Respondemos em até 24 horas úteis
1526    </p>
1527</section>
1528
1529<!-- Card Flutuante de Contato -->
1530<a href="contato.php?assunto=Anúncio+no+VouF" class="card-flutuante" title="Fale conosco sobre publicidade">
1531    <i class="fas fa-comments"></i>
1532    <div>
1533        <div class="card-flutuante-text">Quer anunciar no VouF?</div>
1534        <span class="card-flutuante-sub">Clique aqui e fale conosco!</span>
1535    </div>
1536</a>
1537
1538<!-- Scripts -->
1539<script>
1540// Animações ao rolar a página
1541document.addEventListener('DOMContentLoaded', function() {
1542    // Observer para animações de scroll
1543    const observer = new IntersectionObserver((entries) => {
1544        entries.forEach(entry => {
1545            if (entry.isIntersecting) {
1546                entry.target.classList.add('visible');
1547            }
1548        });
1549    }, { threshold: 0.1 });
1550    
1551    document.querySelectorAll('[data-animate]').forEach(el => {
1552        observer.observe(el);
1553    });
1554    
1555    // Smooth scroll para links âncora
1556    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
1557        anchor.addEventListener('click', function(e) {
1558            e.preventDefault();
1559            const target = document.querySelector(this.getAttribute('href'));
1560            if (target) {
1561                target.scrollIntoView({
1562                    behavior: 'smooth',
1563                    block: 'start'
1564                });
1565            }
1566        });
1567    });
1568    
1569    // Efeito de hover nos cards de navegação
1570    document.querySelectorAll('.nav-card').forEach(card => {
1571        card.addEventListener('mouseenter', function() {
1572            this.style.borderColor = 'var(--brand-primary)';
1573        });
1574        card.addEventListener('mouseleave', function() {
1575            this.style.borderColor = 'transparent';
1576        });
1577    });
1578});
1579</script>
1579
1580
1581
1582<!-- 1. Sons condicionais (apenas para jogos) -->
1583
1584</main> <!-- Fecha container aberto no header.php -->
1585
1586<!-- 2. Botão Flutuante do Telegram (apenas para afiliados) -->
1587
1588<!-- 3. Páginas de exibição de anúncio do a-ads -->
1589    <div class="w-full px-4 sm:px-6 lg:px-8 text-center items-center my-3">
1590        <div class="inline-block max-w-[320px]">
1591            <iframe data-aa='2126419' src='//ad.a-ads.com/2126419?size=320x50' style="width: 100%; height:50px; border:0; overflow:hidden; background:transparent;" class="mx-auto"></iframe>
1592        </div>
1593    </div>
1594
1595<!-- ================= MODAL DE MENSAGEM GLOBAL (PADRÃO DO SITE) ================= -->
1596<div id="modal-mensagem" class="modal-global hidden" role="dialog" aria-modal="true" aria-labelledby="modal-titulo">
1597    <!-- Overlay escuro 80% -->
1598    <div id="modal-fundo" class="modal-overlay"></div>
1599    
1600    <!-- Container externo (borda animada) -->
1601    <div id="modal-conteudo" class="modal-content">
1602        <!-- Conteúdo interno (fundo sólido) -->
1603        <div class="modal-inner">
1604            <!-- Header -->
1605            <div class="modal-header-custom">
1606                <div id="modal-icone" class="modal-icon"></div>
1607                <h3 id="modal-titulo" class="modal-title"></h3>
1608                <button onclick="fecharModalMensagem()" class="modal-close-btn" aria-label="Fechar">
1609                    <i class="fas fa-times"></i>
1610                </button>
1611            </div>
1612            
1613            <!-- Body -->
1614            <div class="modal-body-custom">
1615                <p id="modal-mensagem-texto" class="modal-text"></p>
1616            </div>
1617            
1618            <!-- Footer com botões -->
1619            <div id="modal-botoes" class="modal-footer-custom"></div>
1620        </div>
1621    </div>
1622</div>
1623
1624<!-- Áudio de notificação (som curto e suave) -->
1625<audio id="modal-sound" preload="auto" style="display:none;">
1626    <source src="sons/notificacao.mp3" type="audio/mpeg">
1627</audio>
1628
1629<style>
1630/* ================= MODAL GLOBAL - BORDA E SOMBRA GRADIENTE ANIMADO ================= */
1631
1632/* Overlay escuro 80% */
1633.modal-overlay {
1634    position: fixed;
1635    inset: 0;
1636    background: rgba(0, 0, 0, 0.8);
1637    backdrop-filter: blur(4px);
1638    z-index: 9998;
1639    opacity: 0;
1640    transition: opacity 0.3s ease;
1641}
1642
1643.modal-global:not(.hidden) .modal-overlay {
1644    opacity: 1;
1645}
1646
1647/* Container externo do modal - responsável pela animação */
1648.modal-content {
1649    position: fixed;
1650    top: 50%;
1651    left: 50%;
1652    transform: translate(-50%, -50%) scale(0.7);
1653    width: 420px;
1654    max-width: 90%;
1655    z-index: 9999;
1656    opacity: 0;
1657    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
1658    border-radius: 1rem;
1659    /* Truque: padding cria espaço para a borda animada */
1660    padding: 5px;
1661    background: conic-gradient(
1662        from 0deg,
1663        #ff0080, #ff8c00, #ffd700, #00ff7f,
1664        #00bfff, #4169e1, #8a2be2, #ff1493,
1665        #ff0080
1666    );
1667    background-size: 100% 100%;
1668    animation: rotateGradient 4s linear infinite;
1669    /* Sombra com glow colorido */
1670    filter: drop-shadow(0 0 15px rgba(255, 0, 128, 0.5))
1671            drop-shadow(0 0 30px rgba(0, 191, 255, 0.3));
1672}
1673
1674.modal-global:not(.hidden) .modal-content {
1675    opacity: 1;
1676    transform: translate(-50%, -50%) scale(1);
1677}
1678
1679/* Rotação do gradiente */
1680@keyframes rotateGradient {
1681    0% {
1682        background: conic-gradient(
1683            from 0deg,
1684            #ff0080, #ff8c00, #ffd700, #00ff7f,
1685            #00bfff, #4169e1, #8a2be2, #ff1493,
1686            #ff0080
1687        );
1688    }
1689    25% {
1690        background: conic-gradient(
1691            from 90deg,
1692            #ff0080, #ff8c00, #ffd700, #00ff7f,
1693            #00bfff, #4169e1, #8a2be2, #ff1493,
1694            #ff0080
1695        );
1696    }
1697    50% {
1698        background: conic-gradient(
1699            from 180deg,
1700            #ff0080, #ff8c00, #ffd700, #00ff7f,
1701            #00bfff, #4169e1, #8a2be2, #ff1493,
1702            #ff0080
1703        );
1704    }
1705    75% {
1706        background: conic-gradient(
1707            from 270deg,
1708            #ff0080, #ff8c00, #ffd700, #00ff7f,
1709            #00bfff, #4169e1, #8a2be2, #ff1493,
1710            #ff0080
1711        );
1712    }
1713    100% {
1714        background: conic-gradient(
1715            from 360deg,
1716            #ff0080, #ff8c00, #ffd700, #00ff7f,
1717            #00bfff, #4169e1, #8a2be2, #ff1493,
1718            #ff0080
1719        );
1720    }
1721}
1722
1723/* Conteúdo interno do modal - fundo sólido por cima da borda */
1724.modal-inner {
1725    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
1726    border-radius: calc(1rem - 3px);
1727    overflow: hidden;
1728    position: relative;
1729}
1730
1731/* Header do modal */
1732.modal-header-custom {
1733    display: flex;
1734    align-items: center;
1735    gap: 1rem;
1736    padding: 1.25rem;
1737    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
1738}
1739
1740.modal-icon {
1741    font-size: 2rem;
1742    flex-shrink: 0;
1743    animation: iconBounce 0.6s ease-out;
1744}
1745
1746@keyframes iconBounce {
1747    0% { transform: scale(0); }
1748    50% { transform: scale(1.2); }
1749    100% { transform: scale(1); }
1750}
1751
1752.modal-title {
1753    flex: 1;
1754    font-size: 1.125rem;
1755    font-weight: 700;
1756    color: #e2e8f0;
1757    margin: 0;
1758}
1759
1760.modal-close-btn {
1761    background: rgba(255, 255, 255, 0.1);
1762    border: none;
1763    color: #94a3b8;
1764    width: 32px;
1765    height: 32px;
1766    border-radius: 50%;
1767    cursor: pointer;
1768    transition: all 0.2s;
1769    display: flex;
1770    align-items: center;
1771    justify-content: center;
1772    flex-shrink: 0;
1773}
1774
1775.modal-close-btn:hover {
1776    background: rgba(248, 113, 113, 0.2);
1777    color: #f87171;
1778    transform: rotate(90deg);
1779}
1780
1781/* Body do modal */
1782.modal-body-custom {
1783    padding: 1.25rem;
1784}
1785
1786.modal-text {
1787    color: #cbd5e1;
1788    font-size: 0.95rem;
1789    line-height: 1.6;
1790    margin: 0;
1791    text-align: center;
1792}
1793
1794/* Footer do modal */
1795.modal-footer-custom {
1796    display: flex;
1797    gap: 0.75rem;
1798    padding: 1rem 1.25rem;
1799    border-top: 1px solid rgba(255, 255, 255, 0.1);
1800    flex-wrap: wrap;
1801}
1802
1803.modal-footer-custom button {
1804    flex: 1;
1805    min-width: 100px;
1806    padding: 0.75rem 1rem;
1807    border-radius: 0.5rem;
1808    font-weight: 600;
1809    font-size: 0.9rem;
1810    cursor: pointer;
1811    transition: all 0.3s;
1812    border: none;
1813    color: white;
1814}
1815
1816/* ===== CORES POR TIPO DE MENSAGEM ===== */
1817/* Cada tipo ajusta a cor do ícone e do botão principal */
1818
1819.modal-global.tipo-sucesso .modal-icon { color: #34d399; }
1820.modal-global.tipo-sucesso .modal-footer-custom button:first-child {
1821    background: linear-gradient(135deg, #34d399, #059669);
1822}
1823.modal-global.tipo-sucesso .modal-content {
1824    filter: drop-shadow(0 0 15px rgba(52, 211, 153, 0.6))
1825            drop-shadow(0 0 30px rgba(16, 185, 129, 0.4));
1826}
1827
1828.modal-global.tipo-erro .modal-icon { color: #f87171; }
1829.modal-global.tipo-erro .modal-footer-custom button:first-child {
1830    background: linear-gradient(135deg, #f87171, #dc2626);
1831}
1832.modal-global.tipo-erro .modal-content {
1833    filter: drop-shadow(0 0 15px rgba(248, 113, 113, 0.6))
1834            drop-shadow(0 0 30px rgba(220, 38, 38, 0.4));
1835}
1836
1837.modal-global.tipo-alerta .modal-icon { color: #fbbf24; }
1838.modal-global.tipo-alerta .modal-footer-custom button:first-child {
1839    background: linear-gradient(135deg, #fbbf24, #f59e0b);
1840    color: #1e293b;
1841}
1842.modal-global.tipo-alerta .modal-content {
1843    filter: drop-shadow(0 0 15px rgba(251, 191, 36, 0.6))
1844            drop-shadow(0 0 30px rgba(245, 158, 11, 0.4));
1845}
1846
1847.modal-global.tipo-info .modal-icon { color: #60a5fa; }
1848.modal-global.tipo-info .modal-footer-custom button:first-child {
1849    background: linear-gradient(135deg, #60a5fa, #3b82f6);
1850}
1851.modal-global.tipo-info .modal-content {
1852    filter: drop-shadow(0 0 15px rgba(96, 165, 250, 0.6))
1853            drop-shadow(0 0 30px rgba(59, 130, 246, 0.4));
1854}
1855
1856.modal-global.tipo-pergunta .modal-icon { color: #a78bfa; }
1857.modal-global.tipo-pergunta .modal-footer-custom button:first-child {
1858    background: linear-gradient(135deg, #a78bfa, #8b5cf6);
1859}
1860.modal-global.tipo-pergunta .modal-content {
1861    filter: drop-shadow(0 0 15px rgba(167, 139, 250, 0.6))
1862            drop-shadow(0 0 30px rgba(139, 92, 246, 0.4));
1863}
1864
1865.modal-global.tipo-vencedor .modal-icon { color: #fbbf24; }
1866.modal-global.tipo-vencedor .modal-footer-custom button:first-child {
1867    background: linear-gradient(135deg, #fbbf24, #f59e0b);
1868    color: #1e293b;
1869}
1870.modal-global.tipo-vencedor .modal-content {
1871    filter: drop-shadow(0 0 20px rgba(251, 191, 36, 0.8))
1872            drop-shadow(0 0 40px rgba(245, 158, 11, 0.5));
1873    animation: rotateGradient 2s linear infinite, pulseGlow 1.5s ease-in-out infinite;
1874}
1875
1876@keyframes pulseGlow {
1877    0%, 100% {
1878        filter: drop-shadow(0 0 20px rgba(251, 191, 36, 0.8))
1879                drop-shadow(0 0 40px rgba(245, 158, 11, 0.5));
1880    }
1881    50% {
1882        filter: drop-shadow(0 0 30px rgba(251, 191, 36, 1))
1883                drop-shadow(0 0 60px rgba(245, 158, 11, 0.8));
1884    }
1885}
1886
1887/* Botão secundário */
1888.modal-footer-custom button:last-child {
1889    background: rgba(255, 255, 255, 0.1);
1890    color: #cbd5e1;
1891}
1892
1893.modal-footer-custom button:last-child:hover {
1894    background: rgba(255, 255, 255, 0.2);
1895}
1896
1897/* Animação de entrada */
1898@keyframes modalSlideIn {
1899    0% {
1900        opacity: 0;
1901        transform: translate(-50%, -60%) scale(0.8);
1902    }
1903    100% {
1904        opacity: 1;
1905        transform: translate(-50%, -50%) scale(1);
1906    }
1907}
1908
1909.modal-global:not(.hidden) .modal-content {
1910    animation: rotateGradient 4s linear infinite, modalSlideIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
1911}
1912
1913/* Responsivo */
1914@media (max-width: 480px) {
1915    .modal-content {
1916        width: 95%;
1917        max-width: 95%;
1918    }
1919    .modal-footer-custom {
1920        flex-direction: column;
1921    }
1922    .modal-footer-custom button {
1923        width: 100%;
1924    }
1925}
1926
1927/* Acessibilidade: foco visível */
1928.modal-close-btn:focus,
1929.modal-footer-custom button:focus {
1930    outline: 2px solid #60a5fa;
1931    outline-offset: 2px;
1932}
1933
1934/* Bloqueia scroll do body quando modal aberto */
1935body.modal-open {
1936    overflow: hidden;
1937}
1938</style>
1939
1940<!-- 5. Notificação de Diamantes Diários -->
1941
1942<!-- 6. Estilos de Animação -->
1943<style>
1944    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
1945    .animate-fade-in { animation: fadeIn 0.5s ease-out; }
1946</style>
1947
1948
1949<!-- 7. Scripts Globais -->
1950<script>
1951// ================= SISTEMA DE MODAL GLOBAL =================
1952(function() {
1953    'use strict';
1954    
1955    // Token de segurança para validar chamadas
1956    const MODAL_SECRET = 'vouf_modal_' + Math.random().toString(36).substr(2, 9);
1957    window.__MODAL_SECRET = MODAL_SECRET;
1958    
1959    // Histórico de modais (previne spam)
1960    let modalHistory = [];
1961    const MAX_MODALS_PER_MINUTE = 10;
1962    
1963    // Som de notificação (Web Audio API como fallback)
1964    function playNotificationSound() {
1965        try {
1966            // Tenta usar o arquivo de áudio
1967            const audio = document.getElementById('modal-sound');
1968            if (audio) {
1969                audio.currentTime = 0;
1970                audio.volume = 0.3;
1971                const playPromise = audio.play();
1972                if (playPromise !== undefined) {
1973                    playPromise.catch(() => {
1974                        // Fallback: gera som via Web Audio API
1975                        generateBeep();
1976                    });
1977                }
1978            } else {
1979                generateBeep();
1980            }
1981        } catch (e) {
1982            generateBeep();
1983        }
1984    }
1985    
1986    // Gera beep via Web Audio API
1987    function generateBeep() {
1988        try {
1989            const audioContext = new (window.AudioContext || window.webkitAudioContext)();
1990            const oscillator = audioContext.createOscillator();
1991            const gainNode = audioContext.createGain();
1992            
1993            oscillator.connect(gainNode);
1994            gainNode.connect(audioContext.destination);
1995            
1996            oscillator.frequency.value = 800;
1997            oscillator.type = 'sine';
1998            
1999            gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
2000            gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3);
2001            
2002            oscillator.start(audioContext.currentTime);
2003            oscillator.stop(audioContext.currentTime + 0.3);
2004        } catch (e) {
2005            // Silenciosamente falha se Web Audio não disponível
2006        }
2007    }
2008    
2009    // Valida chamada do modal (segurança)
2010    function validateModalCall(config) {
2011        // Rate limiting
2012        const now = Date.now();
2013        modalHistory = modalHistory.filter(t => now - t < 60000);
2014        
2015        if (modalHistory.length >= MAX_MODALS_PER_MINUTE) {
2016            console.warn('Modal rate limit exceeded');
2017            return false;
2018        }
2019        
2020        // Valida estrutura
2021        if (!config || typeof config !== 'object') return false;
2022        if (config.mensagem === undefined) return false;
2023        
2024        // Sanitiza inputs
2025        if (typeof config.titulo !== 'string') config.titulo = '';
2026        if (typeof config.mensagem !== 'string') config.mensagem = String(config.mensagem);
2027        if (typeof config.tipo !== 'string') config.tipo = 'info';
2028        
2029        // Lista branca de tipos
2030        const tiposValidos = ['sucesso', 'erro', 'alerta', 'info', 'pergunta', 'vencedor', 'aguarde'];
2031        if (!tiposValidos.includes(config.tipo)) config.tipo = 'info';
2032        
2033        // Limita tamanho
2034        config.titulo = config.titulo.substring(0, 100);
2035        config.mensagem = config.mensagem.substring(0, 1000);
2036        
2037        modalHistory.push(now);
2038        return true;
2039    }
2040    
2041    // Ícones por tipo
2042    const icones = {
2043        'sucesso': '✅',
2044        'erro': '❌',
2045        'alerta': '⚠️',
2046        'info': 'ℹ️',
2047        'pergunta': '❓',
2048        'aguarde': '⏳',
2049        'vencedor': '🏆'
2050    };
2051    
2052    // Função global exibirMensagem
2053    window.exibirMensagem = function(config) {
2054        // Validação de segurança
2055        if (!validateModalCall(config)) return;
2056        
2057        const modal = document.getElementById('modal-mensagem');
2058        const titulo = document.getElementById('modal-titulo');
2059        const mensagem = document.getElementById('modal-mensagem-texto');
2060        const icone = document.getElementById('modal-icone');
2061        const botoes = document.getElementById('modal-botoes');
2062        
2063        if (!modal || !titulo || !mensagem || !icone || !botoes) return;
2064        
2065        // Remove classes de tipo anteriores
2066        modal.className = 'modal-global hidden';
2067        
2068        // Adiciona classe de tipo
2069        modal.classList.add('tipo-' + config.tipo);
2070        
2071        // Preenche conteúdo (com sanitização)
2072        titulo.textContent = config.titulo || '';
2073        mensagem.textContent = config.mensagem || '';
2074        icone.textContent = icones[config.tipo] || '📢';
2075        
2076        // Limpa botões
2077        botoes.innerHTML = '';
2078        
2079        // Cria botão principal
2080        const btn1 = document.createElement('button');
2081        btn1.textContent = config.btn1Texto || 'OK';
2082        btn1.setAttribute('aria-label', config.btn1Texto || 'OK');
2083        btn1.onclick = function() {
2084            if (typeof config.btn1Acao === 'function') {
2085                try {
2086                    config.btn1Acao();
2087                } catch (e) {
2088                    console.error('Erro no callback do modal:', e);
2089                }
2090            }
2091            fecharModalMensagem();
2092        };
2093        botoes.appendChild(btn1);
2094        
2095        // Cria botão secundário
2096        if (config.btn2Texto) {
2097            const btn2 = document.createElement('button');
2098            btn2.textContent = config.btn2Texto;
2099            btn2.setAttribute('aria-label', config.btn2Texto);
2100            btn2.onclick = function() {
2101                if (typeof config.btn2Acao === 'function') {
2102                    try {
2103                        config.btn2Acao();
2104                    } catch (e) {
2105                        console.error('Erro no callback secundário:', e);
2106                    }
2107                }
2108                fecharModalMensagem();
2109            };
2110            botoes.appendChild(btn2);
2111        }
2112        
2113        // Mostra modal
2114        modal.classList.remove('hidden');
2115        document.body.classList.add('modal-open');
2116        
2117        // Toca som
2118        playNotificationSound();
2119        
2120        // Foco no botão principal (acessibilidade)
2121        setTimeout(() => btn1.focus(), 100);
2122        
2123        // Bloqueia fechamento se configurado
2124        const fundo = document.getElementById('modal-fundo');
2125        if (fundo) {
2126            if (config.fecharAoClicarFora === false) {
2127                fundo.onclick = null;
2128            } else {
2129                fundo.onclick = fecharModalMensagem;
2130            }
2131        }
2132    };
2133    
2134    // Função global fecharModalMensagem
2135    window.fecharModalMensagem = function() {
2136        const modal = document.getElementById('modal-mensagem');
2137        if (modal) {
2138            modal.classList.add('hidden');
2139            document.body.classList.remove('modal-open');
2140        }
2141    };
2142    
2143    // Eventos globais
2144    document.addEventListener('keydown', function(e) {
2145        if (e.key === 'Escape') {
2146            const modal = document.getElementById('modal-mensagem');
2147            if (modal && !modal.classList.contains('hidden')) {
2148                const fundo = document.getElementById('modal-fundo');
2149                if (fundo && fundo.onclick === fecharModalMensagem) {
2150                    fecharModalMensagem();
2151                }
2152            }
2153        }
2154    });
2155    
2156    // Previne manipulação direta do DOM
2157    Object.defineProperty(window, 'exibirMensagem', {
2158        writable: false,
2159        configurable: false
2160    });
2161    
2162    Object.defineProperty(window, 'fecharModalMensagem', {
2163        writable: false,
2164        configurable: false
2165    });
2166    
2167})();
2168</script>
vendor: 1 bytes, line 2168
2168
2169<script>
2170/*
2171// ================= FUNÇÕES DE MODAL =================
2172function exibirMensagem(config) {
2173    const modal = document.getElementById('modal-mensagem');
2174    const titulo = document.getElementById('modal-titulo');
2175    const mensagem = document.getElementById('modal-mensagem-texto');
2176    const icone = document.getElementById('modal-icone');
2177    const botoes = document.getElementById('modal-botoes');
2178    const fundo = document.getElementById('modal-fundo');
2179
2180    botoes.innerHTML = '';
2181    titulo.textContent = config.titulo || '';
2182    mensagem.textContent = config.mensagem;
2183
2184    const icones = {
2185        'sucesso': '✅', 'erro': '❌', 'alerta': '⚠️',
2186        'pergunta': '❓', 'info': 'ℹ️', 'aguarde': '', 'vencedor': '🏆'
2187    };
2188    icone.innerHTML = icones[config.tipo] || '📢';
2189
2190    const btn1 = document.createElement('button');
2191    btn1.textContent = config.btn1Texto || 'OK';
2192    btn1.className = `px-4 py-2 rounded font-medium text-white transition ${
2193        config.tipo === 'erro' ? 'bg-red-600 hover:bg-red-700' :
2194        config.tipo === 'sucesso' ? 'bg-green-600 hover:bg-green-700' :
2195        'bg-blue-600 hover:bg-blue-700'
2196    }`;
2197    btn1.onclick = () => { if(config.btn1Acao) config.btn1Acao(); fecharModalMensagem(); };
2198    botoes.appendChild(btn1);
2199
2200    if(config.btn2Texto) {
2201        const btn2 = document.createElement('button');
2202        btn2.textContent = config.btn2Texto;
2203        btn2.className = 'px-4 py-2 bg-gray-400 hover:bg-gray-500 text-white rounded font-medium transition';
2204        btn2.onclick = () => { if(config.btn2Acao) config.btn2Acao(); fecharModalMensagem(); };
2205        botoes.appendChild(btn2);
2206    }
2207
2208    modal.classList.remove('hidden');
2209    document.body.style.overflow = 'hidden';
2210    fundo.onclick = null;
2211    if(config.fecharAoClicarFora !== false) fundo.onclick = fecharModalMensagem;
2212}
2213
2214function fecharModalMensagem() {
2215    document.getElementById('modal-mensagem').classList.add('hidden');
2216    document.body.style.overflow = 'auto';
2217}
2218
2219document.getElementById('modal-conteudo')?.addEventListener('click', e => e.stopPropagation());
2220document.addEventListener('keydown', e => {
2221    if(e.key === 'Escape') {
2222        const modal = document.getElementById('modal-mensagem');
2223        const fundo = document.getElementById('modal-fundo');
2224        if(!modal.classList.contains('hidden') && fundo.onclick === fecharModalMensagem) {
2225            fecharModalMensagem();
2226        }
2227    }
2228});
2229*/
2230// ================= MENU MOBILE E DROPDOWN DESKTOP =================
2231document.addEventListener('DOMContentLoaded', function() {
2232    const toggleBtn = document.getElementById('mobile-menu-toggle');
2233    const closeBtn = document.getElementById('mobile-menu-close');
2234    const overlay = document.getElementById('mobile-menu-overlay');
2235    const panel = document.getElementById('mobile-menu-panel');
2236
2237    function openMenu() {
2238        if(toggleBtn) toggleBtn.setAttribute('aria-expanded', 'true');
2239        if(overlay) overlay.setAttribute('data-state', 'open');
2240        if(panel) panel.setAttribute('data-state', 'open');
2241        document.body.style.overflow = 'hidden';
2242    }
2243
2244    function closeMenu() {
2245        if(toggleBtn) toggleBtn.setAttribute('aria-expanded', 'false');
2246        if(overlay) overlay.setAttribute('data-state', 'closed');
2247        if(panel) panel.setAttribute('data-state', 'closed');
2248        document.body.style.overflow = '';
2249    }
2250
2251    toggleBtn?.addEventListener('click', openMenu);
2252    closeBtn?.addEventListener('click', closeMenu);
2253    overlay?.addEventListener('click', closeMenu);
2254    document.addEventListener('keydown', e => { if(e.key === 'Escape') closeMenu(); });
2255
2256    document.querySelectorAll('.mobile-accordion-header').forEach(header => {
2257        header.addEventListener('click', function(e) {
2258            e.stopPropagation();
2259            const contentId = this.getAttribute('aria-controls');
2260            const content = contentId ? document.getElementById(contentId) : null;
2261            if(!content) return;
2262
2263            const isExpanded = this.getAttribute('aria-expanded') === 'true';
2264
2265            document.querySelectorAll('.mobile-accordion-header').forEach(h => {
2266                h.setAttribute('aria-expanded', 'false');
2267                const cId = h.getAttribute('aria-controls');
2268                if(cId) {
2269                    const c = document.getElementById(cId);
2270                    if(c) {
2271                        c.setAttribute('aria-hidden', 'true');
2272                        c.style.maxHeight = '0';
2273                    }
2274                }
2275            });
2276
2277            if(!isExpanded) {
2278                this.setAttribute('aria-expanded', 'true');
2279                content.setAttribute('aria-hidden', 'false');
2280                content.style.maxHeight = content.scrollHeight + 'px';
2281            }
2282        });
2283    });
2284});
2285
2286// ================= NOTIFICAÇÃO DE DIAMANTES =================
2287setTimeout(function() {
2288    const notification = document.getElementById('diamonds-notification');
2289    if (notification) {
2290        notification.classList.add('animate-fade-out');
2291        setTimeout(() => notification.remove(), 500);
2292    }
2293}, 5000);
2294
2295// ================= SERVICE WORKER (PWA) =================
2296if('serviceWorker' in navigator) {
2297    navigator.serviceWorker.register('/service-worker.js')
2298        .then(reg => console.log('SW registrado:', reg))
2299        .catch(err => console.log('Erro ao registrar SW:', err));
2300}
2301
2302// ================= NOTIFICAÇÕES INTERNAS =================
2303document.addEventListener('DOMContentLoaded', function() {
2304    const btnNotificacoes = document.getElementById('btn-notificacoes');
2305    const dropdown = document.getElementById('dropdown-notificacoes');
2306    const lista = document.getElementById('lista-notificacoes');
2307    const badge = document.getElementById('badge-notificacoes');
2308
2309    if(!btnNotificacoes) return;
2310
2311    function carregarNotificacoes() {
2312        fetch('notificacoes.php?action=listar')
2313            .then(r => r.json())
2314            .then(data => {
2315                if(data.success) {
2316                    if(data.nao_lidas > 0) {
2317                        badge.textContent = data.nao_lidas > 99 ? '99+' : data.nao_lidas;
2318                        badge.classList.remove('hidden');
2319                    } else {
2320                        badge.classList.add('hidden');
2321                    }
2322
2323                    if(data.notificacoes.length === 0) {
2324                        lista.innerHTML = '<div class="p-4 text-center text-gray-500 text-sm">Nenhuma notificação</div>';
2325                        return;
2326                    }
2327
2328                    lista.innerHTML = data.notificacoes.map(n => {
2329                        const classes = n.lida ? 'opacity-70' : 'bg-blue-50';
2330                        const linkHtml = n.link ? '<span class="text-xs text-blue-600 mt-1 block">Ver mais →</span>' : '';
2331
2332                        return `<div class="p-3 border-b border-gray-100 hover:bg-gray-50 cursor-pointer ${classes}"
2333                                     data-id="${n.id}" data-link="${n.link || ''}">
2334                                    <div class="flex justify-between items-start">
2335                                        <h5 class="font-semibold text-sm text-gray-800">${n.titulo}</h5>
2336                                        <span class="text-xs text-gray-400">${n.data}</span>
2337                                    </div>
2338                                    <p class="text-xs text-gray-600 mt-1">${n.mensagem}</p>
2339                                    ${linkHtml}
2340                                </div>`;
2341                    }).join('');
2342
2343                    lista.querySelectorAll('[data-id]').forEach(item => {
2344                        item.onclick = function() {
2345                            const id = this.dataset.id;
2346                            const link = this.dataset.link;
2347
2348                            fetch('notificacoes.php', {
2349                                method: 'POST',
2350                                headers: {'Content-Type': 'application/x-www-form-urlencoded'},
2351                                body: 'action=marcar_lida&id=' + id
2352                            });
2353
2354                            if(!this.classList.contains('opacity-70')) {
2355                                const total = parseInt(badge.textContent) || 0;
2356                                if(total <= 1) badge.classList.add('hidden');
2357                                else badge.textContent = total - 1;
2358                                this.classList.add('opacity-70');
2359                            }
2360
2361                            if(link) window.location.href = link;
2362                        };
2363                    });
2364                }
2365            });
2366    }
2367
2368    btnNotificacoes.onclick = function(e) {
2369        e.stopPropagation();
2370        dropdown.classList.toggle('hidden');
2371        if(!dropdown.classList.contains('hidden')) carregarNotificacoes();
2372    };
2373
2374    document.addEventListener('click', function(e) {
2375        if(!btnNotificacoes.contains(e.target) && !dropdown.contains(e.target)) {
2376            dropdown.classList.add('hidden');
2377        }
2378    });
2379
2380    document.getElementById('btn-marcar-todas')?.addEventListener('click', function(e) {
2381        e.preventDefault();
2382        fetch('notificacoes.php', {
2383            method: 'POST',
2384            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
2385            body: 'action=marcar_todas_lidas'
2386        }).then(() => {
2387            badge.classList.add('hidden');
2388            lista.querySelectorAll('[data-id]').forEach(i => i.classList.add('opacity-70'));
2389        });
2390    });
2391
2392    setInterval(() => {
2393        if(!dropdown.classList.contains('hidden')) carregarNotificacoes();
2394        else {
2395            fetch('notificacoes.php?action=listar')
2396                .then(r => r.json())
2397                .then(data => {
2398                    if(data.success && data.nao_lidas > 0) {
2399                        badge.textContent = data.nao_lidas > 99 ? '99+' : data.nao_lidas;
2400                        badge.classList.remove('hidden');
2401                    }
2402                });
2403        }
2404    }, 60000);
2405});
2406
2407// ================= DROPDOWN ESTUDOS - INTERATIVIDADE =================
2408$(document).ready(function() {
2409    $('.estudos-item[data-target]').on('click', function(e) {
2410        e.preventDefault();
2411        e.stopPropagation();
2412
2413        const targetId = $(this).data('target');
2414        const $submenu = $('#' + targetId);
2415        const $parent = $(this);
2416
2417        $parent.siblings('.estudos-submenu, .estudos-estudos-list').addClass('hidden');
2418        $parent.siblings('.estudos-item').removeClass('active');
2419
2420        $submenu.toggleClass('hidden');
2421        $parent.toggleClass('active');
2422
2423        if ($submenu.hasClass('hidden')) {
2424            $submenu.find('.estudos-submenu, .estudos-estudos-list').addClass('hidden');
2425            $submenu.find('.estudos-item').removeClass('active');
2426        }
2427    });
2428
2429    $('.estudos-estudos-list').prev('.estudos-item').on('click', function(e) {
2430        e.preventDefault();
2431        e.stopPropagation();
2432
2433        const targetId = $(this).data('target');
2434        const $list = $('#' + targetId);
2435
2436        $(this).siblings('.estudos-estudos-list').addClass('hidden');
2437        $(this).siblings('.estudos-item').removeClass('active');
2438
2439        $list.toggleClass('hidden');
2440        $(this).toggleClass('active');
2441    });
2442
2443    $(document).on('click', function(e) {
2444        if (!$(e.target).closest('#dropdown-estudos').length) {
2445            $('.estudos-submenu, .estudos-estudos-list').addClass('hidden');
2446            $('.estudos-item').removeClass('active');
2447        }
2448    });
2449
2450    $(document).on('keydown', function(e) {
2451        if (e.key === 'Escape') {
2452            $('.estudos-submenu, .estudos-estudos-list').addClass('hidden');
2453            $('.estudos-item').removeClass('active');
2454        }
2455    });
2456});
2457</script>
2457
2458
2459<!-- 8. Script de Rotação para Banner Mobile -->
2460<script>
2461(function() {
2462    if (window.innerWidth >= 768) return;
2463
2464    const banners = [{"img":"imagens\/banners\/appbaudotesouro.png","link":"appbaudotesouro.php"},{"img":"imagens\/banners\/appbingol.png","link":"appbingol.php"},{"img":"imagens\/banners\/appboom.png","link":"appboom.php"}];
2465    if (banners.length <= 1) return;
2466
2467    const mobileImg = document.querySelector('.banner-mobile-img');
2468    const mobileLink = document.querySelector('.banner-mobile-link');
2469    if (!mobileImg || !mobileLink) return;
2470
2471    let idx = 1;
2472
2473    setInterval(() => {
2474        idx = (idx + 1) % banners.length;
2475        mobileImg.style.opacity = '0.7';
2476        setTimeout(() => {
2477            mobileImg.src = banners[idx].img;
2478            mobileLink.href = banners[idx].link;
2479            mobileImg.onload = () => { mobileImg.style.opacity = '1'; };
2480        }, 200);
2481    }, 25000);
2482})();
2483</script>
2483
2484
2485<!-- 9. Verificação de Bônus (apenas para afiliados) -->
2486
2487<!-- 10. Cookie Consent -->
2488<div id="cookie-banner" class="fixed border-2 border-blue-600 bottom-0 left-0 right-0 bg-gray-600 text-white p-4 z-50 shadow-lg hidden">
2489    <div class="max-w-4xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4">
2490        <div class="text-sm">
2491            <p class="font-medium mb-1">🍪 Cookies e Privacidade</p>
2492            <p class="text-[#94a3b8]">
2493                Usamos cookies para personalizar anúncios e melhorar sua experiência. 
2494                Ao continuar, você concorda com nossa <a href="politica_vouf.php" class="text-[#60a5fa] underline">Política de Privacidade</a>.
2495            </p>
2496        </div>
2497        <div class="flex gap-2">
2498            <button id="cookie-reject" class="px-4 py-2 bg-[#334155] hover:bg-[#475569] rounded text-sm transition">Recusar</button>
2499            <button id="cookie-accept" class="px-4 py-2 bg-[#3b82f6] hover:bg-[#2563eb] rounded text-sm font-medium transition">Aceitar</button>
2500        </div>
2501    </div>
2502</div>
2503
2504<script>
2505document.addEventListener('DOMContentLoaded', function() {
2506    const banner = document.getElementById('cookie-banner');
2507    const acceptBtn = document.getElementById('cookie-accept');
2508    const rejectBtn = document.getElementById('cookie-reject');
2509    
2510    // Verifica consentimento prévio
2511    if (!localStorage.getItem('cookie-consent')) {
2512        banner.classList.remove('hidden');
2513    }
2514    
2515    // Aceitar: permite cookies do AdSense
2516    acceptBtn.addEventListener('click', function() {
2517        localStorage.setItem('cookie-consent', 'accepted');
2518        banner.classList.add('hidden');
2519        // Aqui você pode inicializar scripts do AdSense se estiverem em delay
2520        if (typeof gtag === 'function') {
2521            gtag('consent', 'update', {'ad_storage': 'granted', 'analytics_storage': 'granted'});
2522        }
2523    });
2524    
2525    // Recusar: bloqueia cookies não essenciais
2526    rejectBtn.addEventListener('click', function() {
2527        localStorage.setItem('cookie-consent', 'rejected');
2528        banner.classList.add('hidden');
2529        // Bloqueia cookies de publicidade
2530        if (typeof gtag === 'function') {
2531            gtag('consent', 'update', {'ad_storage': 'denied', 'analytics_storage': 'denied'});
2532        }
2533    });
2534});
2535</script>
2535
2536<!-- ================= FOOTER MODERNO - TEMA ESCURO ================= -->
2537<footer style="background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%); color: #e2e8f0;" class="mt-12 border-t" data-tailwind="border-[#334155]">
2538    <!-- Seção Principal (Grid) -->
2539    <div class="max-w-7xl mx-auto px-4 py-12">
2540        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
2541
2542            <!-- COLUNA 1: Sobre + Segurança -->
2543            <div class="space-y-4">
2544                <div class="flex items-center gap-3">
2545                    <img src="LogoVouFGames.png" alt="VouF" class="h-10 w-auto">
2546                    <span class="font-bold text-lg text-white">VouF Games</span>
2547                </div>
2548                <p class="text-sm opacity-80 leading-relaxed">
2549                    Plataforma de jogos educativos que estimula o raciocínio, memória e conhecimento geral de forma divertida e segura.
2550                </p>
2551
2552                <!-- Badge de Segurança -->
2553                <div class="flex items-center gap-2 pt-2">
2554                    <i class="fas fa-shield-alt text-green-400"></i>
2555                    <span class="text-xs opacity-70">Site protegido por SSL • Dados criptografados</span>
2556                </div>
2557
2558                <!-- Redes Sociais -->
2559                <div class="flex gap-3 pt-2">
2560                    <a href="https://t.me/voufgames" target="_blank" rel="noopener"
2561                       style="background: #1e293b;" class="w-9 h-9 flex items-center justify-center rounded-full hover:bg-blue-600 transition-colors"
2562                       title="Telegram">
2563                        <i class="fab fa-telegram text-white"></i>
2564                    </a>
2565                    <a href="#" id="link-whatsapp-footer" style="background: #1e293b;" class="w-9 h-9 flex items-center justify-center rounded-full hover:bg-green-500 transition-colors"
2566                       title="WhatsApp">
2567                        <i class="fab fa-whatsapp text-white"></i>
2568                    </a>
2569                    <a href="#" id="link-instagram-footer" style="background: #1e293b;" class="w-9 h-9 flex items-center justify-center rounded-full hover:bg-pink-500 transition-colors"
2570                       title="Instagram">
2571                        <i class="fab fa-instagram text-white"></i>
2572                    </a>
2573                    <a href="#" id="link-youtube-footer" style="background: #1e293b;" class="w-9 h-9 flex items-center justify-center rounded-full hover:bg-red-500 transition-colors"
2574                       title="YouTube">
2575                        <i class="fab fa-youtube text-white"></i>
2576                    </a>
2577                </div>
2578            </div>
2579
2580            <!-- COLUNA 2: Links Úteis -->
2581            <div class="space-y-4">
2582                <h4 class="font-semibold text-white text-sm uppercase tracking-wide opacity-90"> Links Úteis</h4>
2583                <ul class="space-y-2 text-sm">
2584                    <li>
2585                        <a href="categorias.php" class="flex items-center gap-2 opacity-80 hover:text-blue-400 transition-colors">
2586                            <i class="fas fa-book-open w-4"></i> Material de Estudos
2587                        </a>
2588                    </li>
2589                    <li>
2590                        <a href="ranking.php" class="flex items-center gap-2 opacity-80 hover:text-blue-400 transition-colors">
2591                            <i class="fas fa-trophy w-4"></i> Ranking de Recordistas
2592                        </a>
2593                    </li>
2594                    <li>
2595                        <a href="blog.php" class="flex items-center gap-2 opacity-80 hover:text-blue-400 transition-colors">
2596                            <i class="fas fa-newspaper w-4"></i> Blog & Novidades
2597                        </a>
2598                    </li>
2599                                                        </ul>
2600            </div>
2601
2602            <!-- COLUNA 3: Institucional -->
2603            <div class="space-y-4">
2604                <h4 class="font-semibold text-white text-sm uppercase tracking-wide opacity-90">📋 Institucional</h4>
2605                <ul class="space-y-2 text-sm">
2606                    <li>
2607                        <a href="sobre.php" class="flex items-center gap-2 opacity-80 hover:text-blue-400 transition-colors">
2608                            <i class="fas fa-info-circle w-4"></i> Sobre Nós
2609                        </a>
2610                    </li>
2611                    <li>
2612                        <a href="contato.php" class="flex items-center gap-2 opacity-80 hover:text-blue-400 transition-colors" id="link-contato-footer">
2613                            <i class="fas fa-envelope w-4"></i> Contato
2614                        </a>
2615                    </li>
2616                    <li>
2617                        <a href="responsavel.php" class="flex items-center gap-2 opacity-80 hover:text-blue-400 transition-colors">
2618                            <i class="fas fa-user-shield w-4"></i> Responsável
2619                        </a>
2620                    </li>
2621                    <li>
2622                        <a href="anuncie-noVouF.php" class="flex items-center gap-2 opacity-80 hover:text-blue-400 transition-colors">
2623                            <i class="fas fa-bullhorn w-4"></i> Anuncie no VouF
2624                        </a>
2625                    </li>
2626                    <li>
2627                        <a href="politica_vouf.php" target="_blank" class="flex items-center gap-2 opacity-80 hover:text-blue-400 transition-colors">
2628                            <i class="fas fa-lock w-4"></i> Política de Privacidade
2629                        </a>
2630                    </li>
2631                    <li>
2632                        <a href="termos_vouf.php" target="_blank" class="flex items-center gap-2 opacity-80 hover:text-blue-400 transition-colors">
2633                            <i class="fas fa-file-contract w-4"></i> Termos de Uso
2634                        </a>
2635                    </li>
2636                </ul>
2637            </div>
2638
2639            <!-- COLUNA 4: Contato Protegido + Newsletter -->
2640            <div class="space-y-4">
2641                <h4 class="font-semibold text-white text-sm uppercase tracking-wide opacity-90">📬 Contato</h4>
2642
2643                <!-- Email Protegido -->
2644                <div class="space-y-2 text-sm">
2645                    <p class="opacity-80 flex items-center gap-2">
2646                        <i class="fas fa-envelope w-4"></i>
2647                        <span id="email-protected" class="select-none cursor-pointer hover:text-blue-400 transition-colors"></span>
2648                    </p>
2649
2650                    <!-- WhatsApp Protegido -->
2651                    <p class="opacity-80 flex items-center gap-2">
2652                        <i class="fab fa-whatsapp w-4"></i>
2653                        <a href="#" id="whatsapp-protected" class="hover:text-blue-400 transition-colors select-none"></a>
2654                    </p>
2655
2656                    <!-- Endereço -->
2657                    <p class="opacity-80 flex items-start gap-2">
2658                        <i class="fas fa-map-marker-alt w-4 mt-1"></i>
2659                        <span id="endereco-protected" class="select-none"></span>
2660                    </p>
2661                </div>
2662
2663                <!-- Newsletter (oculto na index pois já tem formulário próprio) -->
2664                                    <div class="pt-4 border-t" style="border-color: #334155;">
2665                        <p class="text-xs opacity-70 mb-3">Receba novidades e dicas exclusivas:</p>
2666                        <form class="newsletter-form flex gap-2">
2667                            <input type="email" placeholder="Seu e-mail" required
2668                                   style="background: #1e293b; border-color: #334155; color: white;"
2669                                   class="flex-1 px-3 py-2 rounded text-sm placeholder-opacity-50 focus:outline-none focus:border-blue-400">
2670                            <button type="submit" style="background: #3b82f6;" class="px-4 py-2 hover:bg-blue-500 text-white rounded text-sm font-medium transition">
2671                                <i class="fas fa-arrow-right"></i>
2672                            </button>
2673                        </form>
2674                        <p class="newsletter-msg text-xs mt-2 hidden"></p>
2675                    </div>
2676                            </div>
2677
2678        </div>
2679    </div>
2680
2681    <!-- Barra Inferior -->
2682    <div style="background: #0a0e17;" class="border-t" data-tailwind="border-[#334155]">
2683        <div class="max-w-7xl mx-auto px-4 py-4 flex flex-col md:flex-row justify-between items-center gap-3 text-xs opacity-70">
2684            <p>&copy; 2026 <span class="text-white">VouF</span>. Todos os direitos reservados.</p>
2685            <div class="flex items-center gap-4">
2686                <span class="flex items-center gap-1">
2687                    <i class="fas fa-lock text-green-400"></i> Conexão segura
2688                </span>
2689                <span class="flex items-center gap-1">
2690                    <i class="fas fa-cookie text-blue-400"></i>
2691                    <a href="politica_vouf.php#cookies" class="hover:text-blue-400">Cookies</a>
2692                </span>
2693            </div>
2694        </div>
2695    </div>
2696</footer>
2697
2698<!-- 11. Scripts de Proteção Anti-Robô -->
2699<script>
2700document.addEventListener('DOMContentLoaded', function() {
2701
2702    // ===== NEWSLETTER UNIFICADA (footer E index) =====
2703    document.querySelectorAll('.newsletter-form').forEach(function(form) {
2704        form.addEventListener('submit', function(e) {
2705            e.preventDefault();
2706
2707            const emailInput = this.querySelector('input[type="email"]');
2708            const email = emailInput.value.trim();
2709            const msgEl = this.querySelector('.newsletter-msg');
2710            const btn = this.querySelector('button[type="submit"]');
2711
2712            if (!email.includes('@') || !email.includes('.')) {
2713                if (msgEl) {
2714                    msgEl.textContent = '⚠️ Digite um e-mail válido.';
2715                    msgEl.className = 'newsletter-msg text-xs mt-2 text-red-400';
2716                    msgEl.classList.remove('hidden');
2717                }
2718                return;
2719            }
2720
2721            btn.disabled = true;
2722            const originalHTML = btn.innerHTML;
2723            btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
2724
2725            fetch('api.php', {
2726                method: 'POST',
2727                headers: {'Content-Type': 'application/x-www-form-urlencoded'},
2728                body: 'action=newsletter_subscribe&email=' + encodeURIComponent(email)
2729            })
2730            .then(r => r.json())
2731            .then(data => {
2732                btn.disabled = false;
2733                btn.innerHTML = originalHTML;
2734
2735                if (msgEl) {
2736                    if (data.success) {
2737                        msgEl.textContent = '✅ ' + data.message;
2738                        msgEl.className = 'newsletter-msg text-xs mt-2 text-green-400';
2739                        emailInput.value = '';
2740                        form.reset();
2741                    } else {
2742                        msgEl.textContent = '⚠️ ' + data.message;
2743                        msgEl.className = 'newsletter-msg text-xs mt-2 text-yellow-400';
2744                    }
2745                    msgEl.classList.remove('hidden');
2746                    setTimeout(() => msgEl.classList.add('hidden'), 5000);
2747                }
2748            })
2749            .catch(err => {
2750                btn.disabled = false;
2751                btn.innerHTML = originalHTML;
2752                if (msgEl) {
2753                    msgEl.textContent = '❌ Erro de conexão. Tente novamente.';
2754                    msgEl.className = 'newsletter-msg text-xs mt-2 text-red-400';
2755                    msgEl.classList.remove('hidden');
2756                }
2757            });
2758        });
2759    });
2760
2761    // ===== PROTEÇÃO DE EMAIL =====
2762    const emailParts = ['contato', 'appvouf.com.br'];
2763    const email = emailParts[0] + '@' + emailParts[1];
2764    const emailEl = document.getElementById('email-protected');
2765    if(emailEl) {
2766        emailEl.textContent = email;
2767        emailEl.addEventListener('click', function(e) {
2768            e.preventDefault();
2769            window.location.href = 'mailto:' + email;
2770        });
2771    }
2772
2773    // ===== PROTEÇÃO DE WHATSAPP =====
2774    const whatsappNumber = '5511999999999';
2775    const whatsappText = encodeURIComponent('Olá! Vim pelo site VouF Games e gostaria de mais informações.');
2776    const whatsappLink = `https://wa.me/${whatsappNumber}?text=${whatsappText}`;
2777
2778    const $whatsappLink = document.getElementById('whatsapp-protected');
2779    const $whatsappIcon = document.getElementById('link-whatsapp-footer');
2780
2781    function ativarWhatsApp(e) {
2782        e.preventDefault();
2783        window.open(whatsappLink, '_blank', 'noopener,noreferrer');
2784    }
2785
2786    if ($whatsappLink) $whatsappLink.addEventListener('click', ativarWhatsApp);
2787    if ($whatsappIcon) $whatsappIcon.addEventListener('click', ativarWhatsApp);
2788
2789    setTimeout(() => {
2790        if ($whatsappLink) $whatsappLink.textContent = 'WhatsApp';
2791    }, 2000);
2792
2793    // ===== PROTEÇÃO DE ENDEREÇO =====
2794    const enderecoParts = ['São Paulo', 'SP', 'Brasil'];
2795    const enderecoEl = document.getElementById('endereco-protected');
2796    if(enderecoEl) enderecoEl.textContent = enderecoParts.join(' - ');
2797
2798    // ===== REDES SOCIAIS (links gerados via JS) =====
2799    const socialLinks = {
2800        instagram: 'https://instagram.com/voufgames',
2801        youtube: 'https://youtube.com/@voufgames'
2802    };
2803
2804    Object.keys(socialLinks).forEach(platform => {
2805        const el = document.getElementById(`link-${platform}-footer`);
2806        if (el) {
2807            el.addEventListener('click', function(e) {
2808                e.preventDefault();
2809                window.open(socialLinks[platform], '_blank', 'noopener,noreferrer');
2810            });
2811        }
2812    });
2813
2814    // ===== PROTEÇÃO ADICIONAL: Desabilitar seleção de texto =====
2815    document.querySelectorAll('.select-none').forEach(el => {
2816        el.style.userSelect = 'none';
2817        el.addEventListener('contextmenu', e => e.preventDefault());
2818    });
2819
2820    // ===== PROTEÇÃO: Ofuscar links institucionais =====
2821    const contatoLink = document.getElementById('link-contato-footer');
2822    if (contatoLink) {
2823        contatoLink.addEventListener('click', function(e) {
2824            e.preventDefault();
2825            window.location.href = 'contato.php';
2826        });
2827    }
2828});
2829</script>
2829
2830
2831<!-- 12. Estilos Adicionais (CSS Puro para garantir cores) -->
2832<style>
2833/* Cores escuras garantidas via CSS puro (compatível com Tailwind v2) */
2834footer {
2835    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
2836    color: #e2e8f0;
2837}
2838
2839footer .border-t {
2840    border-color: #334155 !important;
2841}
2842
2843footer a {
2844    color: #94a3b8;
2845    transition: color 0.2s, transform 0.2s;
2846}
2847
2848footer a:hover {
2849    color: #60a5fa !important;
2850    transform: translateX(2px);
2851}
2852
2853footer input {
2854    background: #1e293b !important;
2855    border-color: #334155 !important;
2856    color: white !important;
2857}
2858
2859footer input::placeholder {
2860    color: #64748b !important;
2861}
2862
2863footer input:focus {
2864    border-color: #60a5fa !important;
2865    outline: none;
2866}
2867
2868footer button[type="submit"] {
2869    background: #3b82f6 !important;
2870}
2871
2872footer button[type="submit"]:hover {
2873    background: #2563eb !important;
2874}
2875
2876footer [class*="rounded-full"]:hover {
2877    transform: translateY(-2px);
2878    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
2879}
2880
2881@keyframes fadeInUp {
2882    from { opacity: 0; transform: translateY(20px); }
2883    to { opacity: 1; transform: translateY(0); }
2884}
2885
2886footer {
2887    animation: fadeInUp 0.4s ease-out;
2888}
2889
2890@media (max-width: 768px) {
2891    footer .grid {
2892        grid-template-columns: 1fr !important;
2893        text-align: center;
2894    }
2895
2896    footer .flex.items-center {
2897        justify-content: center;
2898    }
2899
2900    footer ul {
2901        text-align: left;
2902    }
2903
2904    footer [class*="rounded-full"] {
2905        margin: 0 auto;
2906    }
2907}
2908
2909.select-none {
2910    user-select: none;
2911    -webkit-user-select: none;
2912    -moz-user-select: none;
2913    -ms-user-select: none;
2914}
2915</style>
2916
2917</body>
2918</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.