PageSourceSearch

https://appvouf.com.br/blog.php

html appvouf.com.br collected 2026-10-02 01:17:30 UTC 108,065 bytes, 2,171 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="Blog VouF Games">
13    <meta property="og:description" content="Confira as últimas novidades, dicas de jogos, estratégias e conteúdos exclusivos no Blog do VouF Games. Aprenda enquanto se diverte!">
14    <meta property="og:url" content="https://appvouf.com.br/blog.php">
15    <meta property="og:image" content="https://appvouf.com.br/imagens/og/blog.jpg">
16    <meta property="og:type" content="website">
17	<title>Blog VouF Games</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="blog.css?v=1780454458">
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="appboom.php" id="banner-link">
71                            <img src="imagens/banners/appboom.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 = 2;
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="Blog">Blog</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="appboom.php" class="banner-mobile-link">
471                <img src="imagens/banners/appboom.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 Blog -->
516    
516<script type="application/ld+json">
517    {
518      "@context": "https://schema.org",
519      "@type": "Blog",
520      "name": "Blog VouF Games",
521      "description": "Dicas, estratégias e novidades sobre jogos educativos",
522      "url": "https://appvouf.com.br/blog.php",
523      "publisher": {
524        "@type": "Organization",
525        "name": "VouF Games"
526      }
527    }
528    </script>
528
529    
530    <!-- Cabeçalho do Blog -->
531    <div class="max-w-5xl mx-auto px-4 py-8 text-center">
532        <h1 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">📰 Blog VouF Games</h1>
533        <p class="text-lg text-gray-600 max-w-2xl mx-auto">
534            Dicas de jogos, estratégias vencedoras, novidades da plataforma e conteúdos exclusivos para você evoluir enquanto se diverte.
535        </p>
536    </div>
537    
538    <!-- Grid de Posts -->
539    <div class="max-w-6xl mx-auto px-4 pb-12">
540                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
541                                    <article class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow group">
542                                                    <a href="blog.php?slug=quiz_nas_escolas" class="block">
543                                <img src="imagens/uploads/blog_quiz_nas_escolas_03.png" 
544                                     alt="Quiz VouF Acelerador do Aprendizado" 
545                                     class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
546                            </a>
547                                                
548                        <div class="p-5">
549                            <!-- Categoria e Data -->
550                            <div class="flex items-center gap-3 text-xs text-gray-500 mb-3">
551                                                                    <span class="px-2 py-1 bg-blue-100 text-blue-700 rounded">Educação</span>
552                                                                <span><i class="far fa-calendar mr-1"></i> 14/06/2026</span>
553                            </div>
554                            
555                            <!-- Título e Resumo -->
556                            <h2 class="text-lg font-bold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors">
557                                <a href="blog.php?slug=quiz_nas_escolas">
558                                    Quiz VouF Acelerador do Aprendizado                                </a>
559                            </h2>
560                            
561                            <p class="text-gray-600 text-sm mb-4 line-clamp-3">
562                                existe um elemento frequentemente subestimado que pode revolucionar seu desenvolvimento acadêmico: o treinamento cognitivo através de jogos de raciocínio, estratégia e conhecimento geral.                            </p>
563                            
564                            <!-- Link Leia Mais -->
565                            <a href="blog.php?slug=quiz_nas_escolas" 
566                               class="inline-flex items-center text-blue-600 font-medium text-sm hover:underline">
567                                Ler mais <i class="fas fa-arrow-right ml-1 text-xs"></i>
568                            </a>
569                        </div>
570                    </article>
571                                    <article class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow group">
572                                                    <a href="blog.php?slug=quiz_vouf_preparacao_para_vida" class="block">
573                                <img src="imagens/uploads/blog_quiz_vouf_preparacao_para_vida_03.png" 
574                                     alt="Quiz VouF - Mais Útil do Que Você Imagina" 
575                                     class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
576                            </a>
577                                                
578                        <div class="p-5">
579                            <!-- Categoria e Data -->
580                            <div class="flex items-center gap-3 text-xs text-gray-500 mb-3">
581                                                                    <span class="px-2 py-1 bg-blue-100 text-blue-700 rounded">Educação</span>
582                                                                <span><i class="far fa-calendar mr-1"></i> 12/06/2026</span>
583                            </div>
584                            
585                            <!-- Título e Resumo -->
586                            <h2 class="text-lg font-bold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors">
587                                <a href="blog.php?slug=quiz_vouf_preparacao_para_vida">
588                                    Quiz VouF - Mais Útil do Que Você Imagina                                </a>
589                            </h2>
590                            
591                            <p class="text-gray-600 text-sm mb-4 line-clamp-3">
592                                                            </p>
593                            
594                            <!-- Link Leia Mais -->
595                            <a href="blog.php?slug=quiz_vouf_preparacao_para_vida" 
596                               class="inline-flex items-center text-blue-600 font-medium text-sm hover:underline">
597                                Ler mais <i class="fas fa-arrow-right ml-1 text-xs"></i>
598                            </a>
599                        </div>
600                    </article>
601                                    <article class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow group">
602                                                    <a href="blog.php?slug=conhecimento_biblico_quiz_vouf" class="block">
603                                <img src="imagens/uploads/blog_conhecimento_biblico_quiz_vouf.png" 
604                                     alt="Reforçando o Conhecimento Bíblico com o Quiz VouF" 
605                                     class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
606                            </a>
607                                                
608                        <div class="p-5">
609                            <!-- Categoria e Data -->
610                            <div class="flex items-center gap-3 text-xs text-gray-500 mb-3">
611                                                                    <sp
611an class="px-2 py-1 bg-blue-100 text-blue-700 rounded">Conhecimento Bíblico</span>
612                                                                <span><i class="far fa-calendar mr-1"></i> 07/06/2026</span>
613                            </div>
614                            
615                            <!-- Título e Resumo -->
616                            <h2 class="text-lg font-bold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors">
617                                <a href="blog.php?slug=conhecimento_biblico_quiz_vouf">
618                                    Reforçando o Conhecimento Bíblico com o Quiz VouF                                </a>
619                            </h2>
620                            
621                            <p class="text-gray-600 text-sm mb-4 line-clamp-3">
622                                Como o Quiz VouF pode se tornar um aliado poderoso no seu estudo bíblico, fortalecendo sua fé e ajudando você a compreender os planos de Deus revelados através de Jesus Cristo.                            </p>
623                            
624                            <!-- Link Leia Mais -->
625                            <a href="blog.php?slug=conhecimento_biblico_quiz_vouf" 
626                               class="inline-flex items-center text-blue-600 font-medium text-sm hover:underline">
627                                Ler mais <i class="fas fa-arrow-right ml-1 text-xs"></i>
628                            </a>
629                        </div>
630                    </article>
631                                    <article class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow group">
632                                                    <a href="blog.php?slug=quiz_para_concursos" class="block">
633                                <img src="imagens/uploads/blog_quiz_para_concursos.png" 
634                                     alt="Quiz como Aliado na Preparação para Concursos" 
635                                     class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
636                            </a>
637                                                
638                        <div class="p-5">
639                            <!-- Categoria e Data -->
640                            <div class="flex items-center gap-3 text-xs text-gray-500 mb-3">
641                                                                    <span class="px-2 py-1 bg-blue-100 text-blue-700 rounded">Educação</span>
642                                                                <span><i class="far fa-calendar mr-1"></i> 02/06/2026</span>
643                            </div>
644                            
645                            <!-- Título e Resumo -->
646                            <h2 class="text-lg font-bold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors">
647                                <a href="blog.php?slug=quiz_para_concursos">
648                                    Quiz como Aliado na Preparação para Concursos                                </a>
649                            </h2>
650                            
651                            <p class="text-gray-600 text-sm mb-4 line-clamp-3">
652                                Como transformar o hábito de jogar no quiz do VouF Games em uma ferramenta poderosa de aprovação.                            </p>
653                            
654                            <!-- Link Leia Mais -->
655                            <a href="blog.php?slug=quiz_para_concursos" 
656                               class="inline-flex items-center text-blue-600 font-medium text-sm hover:underline">
657                                Ler mais <i class="fas fa-arrow-right ml-1 text-xs"></i>
658                            </a>
659                        </div>
660                    </article>
661                                    <article class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow group">
662                                                    <a href="blog.php?slug=Quiz_VouF_Orientacao_Vocacional" class="block">
663                                <img src="imagens/uploads/blog_Quiz_VouF_Orientacao_Vocacional.png" 
664                                     alt=" O Quiz Como Espelho Vocacional" 
665                                     class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
666                            </a>
667                                                
668                        <div class="p-5">
669                            <!-- Categoria e Data -->
670                            <div class="flex items-center gap-3 text-xs text-gray-500 mb-3">
671                                                                    <sp
671an class="px-2 py-1 bg-blue-100 text-blue-700 rounded">Comportamento</span>
672                                                                <span><i class="far fa-calendar mr-1"></i> 01/06/2026</span>
673                            </div>
674                            
675                            <!-- Título e Resumo -->
676                            <h2 class="text-lg font-bold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors">
677                                <a href="blog.php?slug=Quiz_VouF_Orientacao_Vocacional">
678                                     O Quiz Como Espelho Vocacional                                </a>
679                            </h2>
680                            
681                            <p class="text-gray-600 text-sm mb-4 line-clamp-3">
682                                Descobrindo Sua Trajetória Profissional Através do Conhecimento                            </p>
683                            
684                            <!-- Link Leia Mais -->
685                            <a href="blog.php?slug=Quiz_VouF_Orientacao_Vocacional" 
686                               class="inline-flex items-center text-blue-600 font-medium text-sm hover:underline">
687                                Ler mais <i class="fas fa-arrow-right ml-1 text-xs"></i>
688                            </a>
689                        </div>
690                    </article>
691                                    <article class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow group">
692                                                    <a href="blog.php?slug=Mente_em_Desenvolvimento_Estudos_Distracoes" class="block">
693                                <img src="imagens/uploads/blog_Mente_em_Desenvolvimento_Estudos_Distracoes.png" 
694                                     alt="A Era Digital e a Mente em Desenvolvimento" 
695                                     class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
696                            </a>
697                                                
698                        <div class="p-5">
699                            <!-- Categoria e Data -->
700                            <div class="flex items-center gap-3 text-xs text-gray-500 mb-3">
701                                                                    <span class="px-2 py-1 bg-blue-100 text-blue-700 rounded">Educação</span>
702                                                                <span><i class="far fa-calendar mr-1"></i> 31/05/2026</span>
703                            </div>
704                            
705                            <!-- Título e Resumo -->
706                            <h2 class="text-lg font-bold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors">
707                                <a href="blog.php?slug=Mente_em_Desenvolvimento_Estudos_Distracoes">
708                                    A Era Digital e a Mente em Desenvolvimento                                </a>
709                            </h2>
710                            
711                            <p class="text-gray-600 text-sm mb-4 line-clamp-3">
712                                A tecnologia pode ser o maior acelerador cognitivo que já conhecemos ou o principal sabotador do desenvolvimento cerebral. A diferença reside inteiramente na intenção de uso e na qualidade do conteúdo consumido.                            </p>
713                            
714                            <!-- Link Leia Mais -->
715                            <a href="blog.php?slug=Mente_em_Desenvolvimento_Estudos_Distracoes" 
716                               class="inline-flex items-center text-blue-600 font-medium text-sm hover:underline">
717                                Ler mais <i class="fas fa-arrow-right ml-1 text-xs"></i>
718                            </a>
719                        </div>
720                    </article>
721                                    <article class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow group">
722                                                    <a href="blog.php?slug=estudar_questionario_VouF_aprendizado" class="block">
723                                <img src="imagens/uploads/blog_estudar_questionario_VouF_aprendizado.png" 
724                                     alt="Reforçando o aprendizado com questionários" 
725                                     class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
726                            </a>
727                                                
728                        <div class="p-5">
729                            <!-- Categoria e Data -->
730                            <div class="flex items-center gap-3 text-xs text-gray-500 mb-3">
731                                                                    <sp
731an class="px-2 py-1 bg-blue-100 text-blue-700 rounded">Educação</span>
732                                                                <span><i class="far fa-calendar mr-1"></i> 31/05/2026</span>
733                            </div>
734                            
735                            <!-- Título e Resumo -->
736                            <h2 class="text-lg font-bold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors">
737                                <a href="blog.php?slug=estudar_questionario_VouF_aprendizado">
738                                    Reforçando o aprendizado com questionários                                </a>
739                            </h2>
740                            
741                            <p class="text-gray-600 text-sm mb-4 line-clamp-3">
742                                Descubra como os quizzes estratégicos podem transformar sua preparação acadêmica e potencializar sua memória de longo prazo                            </p>
743                            
744                            <!-- Link Leia Mais -->
745                            <a href="blog.php?slug=estudar_questionario_VouF_aprendizado" 
746                               class="inline-flex items-center text-blue-600 font-medium text-sm hover:underline">
747                                Ler mais <i class="fas fa-arrow-right ml-1 text-xs"></i>
748                            </a>
749                        </div>
750                    </article>
751                                    <article class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow group">
752                                                    <a href="blog.php?slug=beneficios_Jogos_VouF_Games_Estudos" class="block">
753                                <img src="imagens/uploads/blog_beneficios_Jogos_VouF_Games_Estudos.png" 
754                                     alt="Transforme sua Rotina de Estudos" 
755                                     class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
756                            </a>
757                                                
758                        <div class="p-5">
759                            <!-- Categoria e Data -->
760                            <div class="flex items-center gap-3 text-xs text-gray-500 mb-3">
761                                                                    <span class="px-2 py-1 bg-blue-100 text-blue-700 rounded">Educação</span>
762                                                                <span><i class="far fa-calendar mr-1"></i> 29/05/2026</span>
763                            </div>
764                            
765                            <!-- Título e Resumo -->
766                            <h2 class="text-lg font-bold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors">
767                                <a href="blog.php?slug=beneficios_Jogos_VouF_Games_Estudos">
768                                    Transforme sua Rotina de Estudos                                </a>
769                            </h2>
770                            
771                            <p class="text-gray-600 text-sm mb-4 line-clamp-3">
772                                Descubra, com a psicopedagoga Dra. Eleonora, como cada jogo do VouF pode potencializar seu aprendizado de forma leve e eficaz.                            </p>
773                            
774                            <!-- Link Leia Mais -->
775                            <a href="blog.php?slug=beneficios_Jogos_VouF_Games_Estudos" 
776                               class="inline-flex items-center text-blue-600 font-medium text-sm hover:underline">
777                                Ler mais <i class="fas fa-arrow-right ml-1 text-xs"></i>
778                            </a>
779                        </div>
780                    </article>
781                                    <article class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow group">
782                                                    <a href="blog.php?slug=bem-vindo-vouf-games" class="block">
783                                <img src="imagens/uploads/img_6a18f46cadfd3.png" 
784                                     alt="Bem-vindo a sua Nova Jornada de Conhecimento!" 
785                                     class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
786                            </a>
787                                                
788                        <div class="p-5">
789                            <!-- Categoria e Data -->
790                            <div class="flex items-center gap-3 text-xs text-gray-500 mb-3">
791                                                                    <span class="px-2 py-1 bg-blue-100 text-blue-700 rounded">Apresentação</span>
792                                                                <span><i class="far fa-calendar mr-1"></i> 28/05/2026</span>
793                            </div>
794                            
795                            <!-- Título e Resumo -->
796                            <h2 class="text-lg font-bold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors">
797                                <a href="blog.php?slug=bem-vindo-vouf-games">
798                                    Bem-vindo a sua Nova Jornada de Conhecimento!                                </a>
799                            </h2>
800                            
801                            <p class="text-gray-600 text-sm mb-4 line-clamp-3">
802                                Conheça o VouF Games: jogos educativos, ranking, material de estudos e uma comunidade que aprende brincando.                            </p>
803                            
804                            <!-- Link Leia Mais -->
805                            <a href="blog.php?slug=bem-vindo-vouf-games" 
806                               class="inline-flex items-center text-blue-600 font-medium text-sm hover:underline">
807                                Ler mais <i class="fas fa-arrow-right ml-1 text-xs"></i>
808                            </a>
809                        </div>
810                    </article>
811                            </div>
812            
813            <!-- Paginação -->
814                        </div>
815    
816    <!-- CTA para Newsletter (opcional) -->
817    <div class="bg-blue-50 border-t border-blue-200 py-12">
818        <div class="max-w-3xl mx-auto px-4 text-center">
819            <h3 class="text-xl font-bold text-gray-900 mb-3">📧 Receba novidades no seu email</h3>
820            <p class="text-gray-600 mb-6">Cadastre-se para receber dicas exclusivas e ser o primeiro a saber das novidades.</p>
821            <form class="newsletter-form flex flex-col sm:flex-row gap-3 max-w-md mx-auto">
822                <input type="email" placeholder="Seu melhor email" required 
823                       class="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
824                <button type="submit" class="px-6 py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition">
825                    Assinar
826                </button>
827            </form>
828<p class="newsletter-msg text-xs mt-2 hidden">
829<p class="newsletter-msg text-xs mt-3 text-neon-secondary">Ao assinar, você concorda com nossa <a href="politica_vouf.php" target="_blank" title="Ver políticas numa nova janela">Política de Privacidade</a>.</p>
830
831        </div>
832    </div>
833    
834    
835<!-- 1. Sons condicionais (apenas para jogos) -->
836
837</main> <!-- Fecha container aberto no header.php -->
838
839<!-- 2. Botão Flutuante do Telegram (apenas para afiliados) -->
840
841<!-- 3. Páginas de exibição de anúncio do a-ads -->
842    <div class="w-full px-4 sm:px-6 lg:px-8 text-center items-center my-3">
843        <div class="inline-block max-w-[320px]">
844            <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>
845        </div>
846    </div>
847
848<!-- ================= MODAL DE MENSAGEM GLOBAL (PADRÃO DO SITE) ================= -->
849<div id="modal-mensagem" class="modal-global hidden" role="dialog" aria-modal="true" aria-labelledby="modal-titulo">
850    <!-- Overlay escuro 80% -->
851    <div id="modal-fundo" class="modal-overlay"></div>
852    
853    <!-- Container externo (borda animada) -->
854    <div id="modal-conteudo" class="modal-content">
855        <!-- Conteúdo interno (fundo sólido) -->
856        <div class="modal-inner">
857            <!-- Header -->
858            <div class="modal-header-custom">
859                <div id="modal-icone" class="modal-icon"></div>
860                <h3 id="modal-titulo" class="modal-title"></h3>
861                <button onclick="fecharModalMensagem()" class="modal-close-btn" aria-label="Fechar">
862                    <i class="fas fa-times"></i>
863                </button>
864            </div>
865            
866            <!-- Body -->
867            <div class="modal-body-custom">
868                <p id="modal-mensagem-texto" class="modal-text"></p>
869            </div>
870            
871            <!-- Footer com botões -->
872            <div id="modal-botoes" class="modal-footer-custom"></div>
873        </div>
874    </div>
875</div>
876
877<!-- Áudio de notificação (som curto e suave) -->
878<audio id="modal-sound" preload="auto" style="display:none;">
879    <source src="sons/notificacao.mp3" type="audio/mpeg">
880</audio>
881
882<style>
883/* ================= MODAL GLOBAL - BORDA E SOMBRA GRADIENTE ANIMADO ================= */
884
885/* Overlay escuro 80% */
886.modal-overlay {
887    position: fixed;
888    inset: 0;
889    background: rgba(0, 0, 0, 0.8);
890    backdrop-filter: blur(4px);
891    z-index: 9998;
892    opacity: 0;
893    transition: opacity 0.3s ease;
894}
895
896.modal-global:not(.hidden) .modal-overlay {
897    opacity: 1;
898}
899
900/* Container externo do modal - responsável pela animação */
901.modal-content {
902    position: fixed;
903    top: 50%;
904    left: 50%;
905    transform: translate(-50%, -50%) scale(0.7);
906    width: 420px;
907    max-width: 90%;
908    z-index: 9999;
909    opacity: 0;
910    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
911    border-radius: 1rem;
912    /* Truque: padding cria espaço para a borda animada */
913    padding: 5px;
914    background: conic-gradient(
915        from 0deg,
916        #ff0080, #ff8c00, #ffd700, #00ff7f,
917        #00bfff, #4169e1, #8a2be2, #ff1493,
918        #ff0080
919    );
920    background-size: 100% 100%;
921    animation: rotateGradient 4s linear infinite;
922    /* Sombra com glow colorido */
923    filter: drop-shadow(0 0 15px rgba(255, 0, 128, 0.5))
924            drop-shadow(0 0 30px rgba(0, 191, 255, 0.3));
925}
926
927.modal-global:not(.hidden) .modal-content {
928    opacity: 1;
929    transform: translate(-50%, -50%) scale(1);
930}
931
932/* Rotação do gradiente */
933@keyframes rotateGradient {
934    0% {
935        background: conic-gradient(
936            from 0deg,
937            #ff0080, #ff8c00, #ffd700, #00ff7f,
938            #00bfff, #4169e1, #8a2be2, #ff1493,
939            #ff0080
940        );
941    }
942    25% {
943        background: conic-gradient(
944            from 90deg,
945            #ff0080, #ff8c00, #ffd700, #00ff7f,
946            #00bfff, #4169e1, #8a2be2, #ff1493,
947            #ff0080
948        );
949    }
950    50% {
951        background: conic-gradient(
952            from 180deg,
953            #ff0080, #ff8c00, #ffd700, #00ff7f,
954            #00bfff, #4169e1, #8a2be2, #ff1493,
955            #ff0080
956        );
957    }
958    75% {
959        background: conic-gradient(
960            from 270deg,
961            #ff0080, #ff8c00, #ffd700, #00ff7f,
962            #00bfff, #4169e1, #8a2be2, #ff1493,
963            #ff0080
964        );
965    }
966    100% {
967        background: conic-gradient(
968            from 360deg,
969            #ff0080, #ff8c00, #ffd700, #00ff7f,
970            #00bfff, #4169e1, #8a2be2, #ff1493,
971            #ff0080
972        );
973    }
974}
975
976/* Conteúdo interno do modal - fundo sólido por cima da borda */
977.modal-inner {
978    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
979    border-radius: calc(1rem - 3px);
980    overflow: hidden;
981    position: relative;
982}
983
984/* Header do modal */
985.modal-header-custom {
986    display: flex;
987    align-items: center;
988    gap: 1rem;
989    padding: 1.25rem;
990    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
991}
992
993.modal-icon {
994    font-size: 2rem;
995    flex-shrink: 0;
996    animation: iconBounce 0.6s ease-out;
997}
998
999@keyframes iconBounce {
1000    0% { transform: scale(0); }
1001    50% { transform: scale(1.2); }
1002    100% { transform: scale(1); }
1003}
1004
1005.modal-title {
1006    flex: 1;
1007    font-size: 1.125rem;
1008    font-weight: 700;
1009    color: #e2e8f0;
1010    margin: 0;
1011}
1012
1013.modal-close-btn {
1014    background: rgba(255, 255, 255, 0.1);
1015    border: none;
1016    color: #94a3b8;
1017    width: 32px;
1018    height: 32px;
1019    border-radius: 50%;
1020    cursor: pointer;
1021    transition: all 0.2s;
1022    display: flex;
1023    align-items: center;
1024    justify-content: center;
1025    flex-shrink: 0;
1026}
1027
1028.modal-close-btn:hover {
1029    background: rgba(248, 113, 113, 0.2);
1030    color: #f87171;
1031    transform: rotate(90deg);
1032}
1033
1034/* Body do modal */
1035.modal-body-custom {
1036    padding: 1.25rem;
1037}
1038
1039.modal-text {
1040    color: #cbd5e1;
1041    font-size: 0.95rem;
1042    line-height: 1.6;
1043    margin: 0;
1044    text-align: center;
1045}
1046
1047/* Footer do modal */
1048.modal-footer-custom {
1049    display: flex;
1050    gap: 0.75rem;
1051    padding: 1rem 1.25rem;
1052    border-top: 1px solid rgba(255, 255, 255, 0.1);
1053    flex-wrap: wrap;
1054}
1055
1056.modal-footer-custom button {
1057    flex: 1;
1058    min-width: 100px;
1059    padding: 0.75rem 1rem;
1060    border-radius: 0.5rem;
1061    font-weight: 600;
1062    font-size: 0.9rem;
1063    cursor: pointer;
1064    transition: all 0.3s;
1065    border: none;
1066    color: white;
1067}
1068
1069/* ===== CORES POR TIPO DE MENSAGEM ===== */
1070/* Cada tipo ajusta a cor do ícone e do botão principal */
1071
1072.modal-global.tipo-sucesso .modal-icon { color: #34d399; }
1073.modal-global.tipo-sucesso .modal-footer-custom button:first-child {
1074    background: linear-gradient(135deg, #34d399, #059669);
1075}
1076.modal-global.tipo-sucesso .modal-content {
1077    filter: drop-shadow(0 0 15px rgba(52, 211, 153, 0.6))
1078            drop-shadow(0 0 30px rgba(16, 185, 129, 0.4));
1079}
1080
1081.modal-global.tipo-erro .modal-icon { color: #f87171; }
1082.modal-global.tipo-erro .modal-footer-custom button:first-child {
1083    background: linear-gradient(135deg, #f87171, #dc2626);
1084}
1085.modal-global.tipo-erro .modal-content {
1086    filter: drop-shadow(0 0 15px rgba(248, 113, 113, 0.6))
1087            drop-shadow(0 0 30px rgba(220, 38, 38, 0.4));
1088}
1089
1090.modal-global.tipo-alerta .modal-icon { color: #fbbf24; }
1091.modal-global.tipo-alerta .modal-footer-custom button:first-child {
1092    background: linear-gradient(135deg, #fbbf24, #f59e0b);
1093    color: #1e293b;
1094}
1095.modal-global.tipo-alerta .modal-content {
1096    filter: drop-shadow(0 0 15px rgba(251, 191, 36, 0.6))
1097            drop-shadow(0 0 30px rgba(245, 158, 11, 0.4));
1098}
1099
1100.modal-global.tipo-info .modal-icon { color: #60a5fa; }
1101.modal-global.tipo-info .modal-footer-custom button:first-child {
1102    background: linear-gradient(135deg, #60a5fa, #3b82f6);
1103}
1104.modal-global.tipo-info .modal-content {
1105    filter: drop-shadow(0 0 15px rgba(96, 165, 250, 0.6))
1106            drop-shadow(0 0 30px rgba(59, 130, 246, 0.4));
1107}
1108
1109.modal-global.tipo-pergunta .modal-icon { color: #a78bfa; }
1110.modal-global.tipo-pergunta .modal-footer-custom button:first-child {
1111    background: linear-gradient(135deg, #a78bfa, #8b5cf6);
1112}
1113.modal-global.tipo-pergunta .modal-content {
1114    filter: drop-shadow(0 0 15px rgba(167, 139, 250, 0.6))
1115            drop-shadow(0 0 30px rgba(139, 92, 246, 0.4));
1116}
1117
1118.modal-global.tipo-vencedor .modal-icon { color: #fbbf24; }
1119.modal-global.tipo-vencedor .modal-footer-custom button:first-child {
1120    background: linear-gradient(135deg, #fbbf24, #f59e0b);
1121    color: #1e293b;
1122}
1123.modal-global.tipo-vencedor .modal-content {
1124    filter: drop-shadow(0 0 20px rgba(251, 191, 36, 0.8))
1125            drop-shadow(0 0 40px rgba(245, 158, 11, 0.5));
1126    animation: rotateGradient 2s linear infinite, pulseGlow 1.5s ease-in-out infinite;
1127}
1128
1129@keyframes pulseGlow {
1130    0%, 100% {
1131        filter: drop-shadow(0 0 20px rgba(251, 191, 36, 0.8))
1132                drop-shadow(0 0 40px rgba(245, 158, 11, 0.5));
1133    }
1134    50% {
1135        filter: drop-shadow(0 0 30px rgba(251, 191, 36, 1))
1136                drop-shadow(0 0 60px rgba(245, 158, 11, 0.8));
1137    }
1138}
1139
1140/* Botão secundário */
1141.modal-footer-custom button:last-child {
1142    background: rgba(255, 255, 255, 0.1);
1143    color: #cbd5e1;
1144}
1145
1146.modal-footer-custom button:last-child:hover {
1147    background: rgba(255, 255, 255, 0.2);
1148}
1149
1150/* Animação de entrada */
1151@keyframes modalSlideIn {
1152    0% {
1153        opacity: 0;
1154        transform: translate(-50%, -60%) scale(0.8);
1155    }
1156    100% {
1157        opacity: 1;
1158        transform: translate(-50%, -50%) scale(1);
1159    }
1160}
1161
1162.modal-global:not(.hidden) .modal-content {
1163    animation: rotateGradient 4s linear infinite, modalSlideIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
1164}
1165
1166/* Responsivo */
1167@media (max-width: 480px) {
1168    .modal-content {
1169        width: 95%;
1170        max-width: 95%;
1171    }
1172    .modal-footer-custom {
1173        flex-direction: column;
1174    }
1175    .modal-footer-custom button {
1176        width: 100%;
1177    }
1178}
1179
1180/* Acessibilidade: foco visível */
1181.modal-close-btn:focus,
1182.modal-footer-custom button:focus {
1183    outline: 2px solid #60a5fa;
1184    outline-offset: 2px;
1185}
1186
1187/* Bloqueia scroll do body quando modal aberto */
1188body.modal-open {
1189    overflow: hidden;
1190}
1191</style>
1192
1193<!-- 5. Notificação de Diamantes Diários -->
1194
1195<!-- 6. Estilos de Animação -->
1196<style>
1197    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
1198    .animate-fade-in { animation: fadeIn 0.5s ease-out; }
1199</style>
1200
1201
1202<!-- 7. Scripts Globais -->
1203<script>
1204// ================= SISTEMA DE MODAL GLOBAL =================
1205(function() {
1206    'use strict';
1207    
1208    // Token de segurança para validar chamadas
1209    const MODAL_SECRET = 'vouf_modal_' + Math.random().toString(36).substr(2, 9);
1210    window.__MODAL_SECRET = MODAL_SECRET;
1211    
1212    // Histórico de modais (previne spam)
1213    let modalHistory = [];
1214    const MAX_MODALS_PER_MINUTE = 10;
1215    
1216    // Som de notificação (Web Audio API como fallback)
1217    function playNotificationSound() {
1218        try {
1219            // Tenta usar o arquivo de áudio
1220            const audio = document.getElementById('modal-sound');
1221            if (audio) {
1222                audio.currentTime = 0;
1223                audio.volume = 0.3;
1224                const playPromise = audio.play();
1225                if (playPromise !== undefined) {
1226                    playPromise.catch(() => {
1227                        // Fallback: gera som via Web Audio API
1228                        generateBeep();
1229                    });
1230                }
1231            } else {
1232                generateBeep();
1233            }
1234        } catch (e) {
1235            generateBeep();
1236        }
1237    }
1238    
1239    // Gera beep via Web Audio API
1240    function generateBeep() {
1241        try {
1242            const audioContext = new (window.AudioContext || window.webkitAudioContext)();
1243            const oscillator = audioContext.createOscillator();
1244            const gainNode = audioContext.createGain();
1245            
1246            oscillator.connect(gainNode);
1247            gainNode.connect(audioContext.destination);
1248            
1249            oscillator.frequency.value = 800;
1250            oscillator.type = 'sine';
1251            
1252            gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
1253            gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3);
1254            
1255            oscillator.start(audioContext.currentTime);
1256            oscillator.stop(audioContext.currentTime + 0.3);
1257        } catch (e) {
1258            // Silenciosamente falha se Web Audio não disponível
1259        }
1260    }
1261    
1262    // Valida chamada do modal (segurança)
1263    function validateModalCall(config) {
1264        // Rate limiting
1265        const now = Date.now();
1266        modalHistory = modalHistory.filter(t => now - t < 60000);
1267        
1268        if (modalHistory.length >= MAX_MODALS_PER_MINUTE) {
1269            console.warn('Modal rate limit exceeded');
1270            return false;
1271        }
1272        
1273        // Valida estrutura
1274        if (!config || typeof config !== 'object') return false;
1275        if (config.mensagem === undefined) return false;
1276        
1277        // Sanitiza inputs
1278        if (typeof config.titulo !== 'string') config.titulo = '';
1279        if (typeof config.mensagem !== 'string') config.mensagem = String(config.mensagem);
1280        if (typeof config.tipo !== 'string') config.tipo = 'info';
1281        
1282        // Lista branca de tipos
1283        const tiposValidos = ['sucesso', 'erro', 'alerta', 'info', 'pergunta', 'vencedor', 'aguarde'];
1284        if (!tiposValidos.includes(config.tipo)) config.tipo = 'info';
1285        
1286        // Limita tamanho
1287        config.titulo = config.titulo.substring(0, 100);
1288        config.mensagem = config.mensagem.substring(0, 1000);
1289        
1290        modalHistory.push(now);
1291        return true;
1292    }
1293    
1294    // Ícones por tipo
1295    const icones = {
1296        'sucesso': '✅',
1297        'erro': '❌',
1298        'alerta': '⚠️',
1299        'info': 'ℹ️',
1300        'pergunta': '❓',
1301        'aguarde': '⏳',
1302        'vencedor': '🏆'
1303    };
1304    
1305    // Função global exibirMensagem
1306    window.exibirMensagem = function(config) {
1307        // Validação de segurança
1308        if (!validateModalCall(config)) return;
1309        
1310        const modal = document.getElementById('modal-mensagem');
1311        const titulo = document.getElementById('modal-titulo');
1312        const mensagem = document.getElementById('modal-mensagem-texto');
1313        const icone = document.getElementById('modal-icone');
1314        const botoes = document.getElementById('modal-botoes');
1315        
1316        if (!modal || !titulo || !mensagem || !icone || !botoes) return;
1317        
1318        // Remove classes de tipo anteriores
1319        modal.className = 'modal-global hidden';
1320        
1321        // Adiciona classe de tipo
1322        modal.classList.add('tipo-' + config.tipo);
1323        
1324        // Preenche conteúdo (com sanitização)
1325        titulo.textContent = config.titulo || '';
1326        mensagem.textContent = config.mensagem || '';
1327        icone.textContent = icones[config.tipo] || '📢';
1328        
1329        // Limpa botões
1330        botoes.innerHTML = '';
1331        
1332        // Cria botão principal
1333        const btn1 = document.createElement('button');
1334        btn1.textContent = config.btn1Texto || 'OK';
1335        btn1.setAttribute('aria-label', config.btn1Texto || 'OK');
1336        btn1.onclick = function() {
1337            if (typeof config.btn1Acao === 'function') {
1338                try {
1339                    config.btn1Acao();
1340                } catch (e) {
1341                    console.error('Erro no callback do modal:', e);
1342                }
1343            }
1344            fecharModalMensagem();
1345        };
1346        botoes.appendChild(btn1);
1347        
1348        // Cria botão secundário
1349        if (config.btn2Texto) {
1350            const btn2 = document.createElement('button');
1351            btn2.textContent = config.btn2Texto;
1352            btn2.setAttribute('aria-label', config.btn2Texto);
1353            btn2.onclick = function() {
1354                if (typeof config.btn2Acao === 'function') {
1355                    try {
1356                        config.btn2Acao();
1357                    } catch (e) {
1358                        console.error('Erro no callback secundário:', e);
1359                    }
1360                }
1361                fecharModalMensagem();
1362            };
1363            botoes.appendChild(btn2);
1364        }
1365        
1366        // Mostra modal
1367        modal.classList.remove('hidden');
1368        document.body.classList.add('modal-open');
1369        
1370        // Toca som
1371        playNotificationSound();
1372        
1373        // Foco no botão principal (acessibilidade)
1374        setTimeout(() => btn1.focus(), 100);
1375        
1376        // Bloqueia fechamento se configurado
1377        const fundo = document.getElementById('modal-fundo');
1378        if (fundo) {
1379            if (config.fecharAoClicarFora === false) {
1380                fundo.onclick = null;
1381            } else {
1382                fundo.onclick = fecharModalMensagem;
1383            }
1384        }
1385    };
1386    
1387    // Função global fecharModalMensagem
1388    window.fecharModalMensagem = function() {
1389        const modal = document.getElementById('modal-mensagem');
1390        if (modal) {
1391            modal.classList.add('hidden');
1392            document.body.classList.remove('modal-open');
1393        }
1394    };
1395    
1396    // Eventos globais
1397    document.addEventListener('keydown', function(e) {
1398        if (e.key === 'Escape') {
1399            const modal = document.getElementById('modal-mensagem');
1400            if (modal && !modal.classList.contains('hidden')) {
1401                const fundo = document.getElementById('modal-fundo');
1402                if (fundo && fundo.onclick === fecharModalMensagem) {
1403                    fecharModalMensagem();
1404                }
1405            }
1406        }
1407    });
1408    
1409    // Previne manipulação direta do DOM
1410    Object.defineProperty(window, 'exibirMensagem', {
1411        writable: false,
1412        configurable: false
1413    });
1414    
1415    Object.defineProperty(window, 'fecharModalMensagem', {
1416        writable: false,
1417        configurable: false
1418    });
1419    
1420})();
1421</script>
vendor: 1 bytes, line 1421
1421
1422<script>
1423/*
1424// ================= FUNÇÕES DE MODAL =================
1425function exibirMensagem(config) {
1426    const modal = document.getElementById('modal-mensagem');
1427    const titulo = document.getElementById('modal-titulo');
1428    const mensagem = document.getElementById('modal-mensagem-texto');
1429    const icone = document.getElementById('modal-icone');
1430    const botoes = document.getElementById('modal-botoes');
1431    const fundo = document.getElementById('modal-fundo');
1432
1433    botoes.innerHTML = '';
1434    titulo.textContent = config.titulo || '';
1435    mensagem.textContent = config.mensagem;
1436
1437    const icones = {
1438        'sucesso': '✅', 'erro': '❌', 'alerta': '⚠️',
1439        'pergunta': '❓', 'info': 'ℹ️', 'aguarde': '', 'vencedor': '🏆'
1440    };
1441    icone.innerHTML = icones[config.tipo] || '📢';
1442
1443    const btn1 = document.createElement('button');
1444    btn1.textContent = config.btn1Texto || 'OK';
1445    btn1.className = `px-4 py-2 rounded font-medium text-white transition ${
1446        config.tipo === 'erro' ? 'bg-red-600 hover:bg-red-700' :
1447        config.tipo === 'sucesso' ? 'bg-green-600 hover:bg-green-700' :
1448        'bg-blue-600 hover:bg-blue-700'
1449    }`;
1450    btn1.onclick = () => { if(config.btn1Acao) config.btn1Acao(); fecharModalMensagem(); };
1451    botoes.appendChild(btn1);
1452
1453    if(config.btn2Texto) {
1454        const btn2 = document.createElement('button');
1455        btn2.textContent = config.btn2Texto;
1456        btn2.className = 'px-4 py-2 bg-gray-400 hover:bg-gray-500 text-white rounded font-medium transition';
1457        btn2.onclick = () => { if(config.btn2Acao) config.btn2Acao(); fecharModalMensagem(); };
1458        botoes.appendChild(btn2);
1459    }
1460
1461    modal.classList.remove('hidden');
1462    document.body.style.overflow = 'hidden';
1463    fundo.onclick = null;
1464    if(config.fecharAoClicarFora !== false) fundo.onclick = fecharModalMensagem;
1465}
1466
1467function fecharModalMensagem() {
1468    document.getElementById('modal-mensagem').classList.add('hidden');
1469    document.body.style.overflow = 'auto';
1470}
1471
1472document.getElementById('modal-conteudo')?.addEventListener('click', e => e.stopPropagation());
1473document.addEventListener('keydown', e => {
1474    if(e.key === 'Escape') {
1475        const modal = document.getElementById('modal-mensagem');
1476        const fundo = document.getElementById('modal-fundo');
1477        if(!modal.classList.contains('hidden') && fundo.onclick === fecharModalMensagem) {
1478            fecharModalMensagem();
1479        }
1480    }
1481});
1482*/
1483// ================= MENU MOBILE E DROPDOWN DESKTOP =================
1484document.addEventListener('DOMContentLoaded', function() {
1485    const toggleBtn = document.getElementById('mobile-menu-toggle');
1486    const closeBtn = document.getElementById('mobile-menu-close');
1487    const overlay = document.getElementById('mobile-menu-overlay');
1488    const panel = document.getElementById('mobile-menu-panel');
1489
1490    function openMenu() {
1491        if(toggleBtn) toggleBtn.setAttribute('aria-expanded', 'true');
1492        if(overlay) overlay.setAttribute('data-state', 'open');
1493        if(panel) panel.setAttribute('data-state', 'open');
1494        document.body.style.overflow = 'hidden';
1495    }
1496
1497    function closeMenu() {
1498        if(toggleBtn) toggleBtn.setAttribute('aria-expanded', 'false');
1499        if(overlay) overlay.setAttribute('data-state', 'closed');
1500        if(panel) panel.setAttribute('data-state', 'closed');
1501        document.body.style.overflow = '';
1502    }
1503
1504    toggleBtn?.addEventListener('click', openMenu);
1505    closeBtn?.addEventListener('click', closeMenu);
1506    overlay?.addEventListener('click', closeMenu);
1507    document.addEventListener('keydown', e => { if(e.key === 'Escape') closeMenu(); });
1508
1509    document.querySelectorAll('.mobile-accordion-header').forEach(header => {
1510        header.addEventListener('click', function(e) {
1511            e.stopPropagation();
1512            const contentId = this.getAttribute('aria-controls');
1513            const content = contentId ? document.getElementById(contentId) : null;
1514            if(!content) return;
1515
1516            const isExpanded = this.getAttribute('aria-expanded') === 'true';
1517
1518            document.querySelectorAll('.mobile-accordion-header').forEach(h => {
1519                h.setAttribute('aria-expanded', 'false');
1520                const cId = h.getAttribute('aria-controls');
1521                if(cId) {
1522                    const c = document.getElementById(cId);
1523                    if(c) {
1524                        c.setAttribute('aria-hidden', 'true');
1525                        c.style.maxHeight = '0';
1526                    }
1527                }
1528            });
1529
1530            if(!isExpanded) {
1531                this.setAttribute('aria-expanded', 'true');
1532                content.setAttribute('aria-hidden', 'false');
1533                content.style.maxHeight = content.scrollHeight + 'px';
1534            }
1535        });
1536    });
1537});
1538
1539// ================= NOTIFICAÇÃO DE DIAMANTES =================
1540setTimeout(function() {
1541    const notification = document.getElementById('diamonds-notification');
1542    if (notification) {
1543        notification.classList.add('animate-fade-out');
1544        setTimeout(() => notification.remove(), 500);
1545    }
1546}, 5000);
1547
1548// ================= SERVICE WORKER (PWA) =================
1549if('serviceWorker' in navigator) {
1550    navigator.serviceWorker.register('/service-worker.js')
1551        .then(reg => console.log('SW registrado:', reg))
1552        .catch(err => console.log('Erro ao registrar SW:', err));
1553}
1554
1555// ================= NOTIFICAÇÕES INTERNAS =================
1556document.addEventListener('DOMContentLoaded', function() {
1557    const btnNotificacoes = document.getElementById('btn-notificacoes');
1558    const dropdown = document.getElementById('dropdown-notificacoes');
1559    const lista = document.getElementById('lista-notificacoes');
1560    const badge = document.getElementById('badge-notificacoes');
1561
1562    if(!btnNotificacoes) return;
1563
1564    function carregarNotificacoes() {
1565        fetch('notificacoes.php?action=listar')
1566            .then(r => r.json())
1567            .then(data => {
1568                if(data.success) {
1569                    if(data.nao_lidas > 0) {
1570                        badge.textContent = data.nao_lidas > 99 ? '99+' : data.nao_lidas;
1571                        badge.classList.remove('hidden');
1572                    } else {
1573                        badge.classList.add('hidden');
1574                    }
1575
1576                    if(data.notificacoes.length === 0) {
1577                        lista.innerHTML = '<div class="p-4 text-center text-gray-500 text-sm">Nenhuma notificação</div>';
1578                        return;
1579                    }
1580
1581                    lista.innerHTML = data.notificacoes.map(n => {
1582                        const classes = n.lida ? 'opacity-70' : 'bg-blue-50';
1583                        const linkHtml = n.link ? '<span class="text-xs text-blue-600 mt-1 block">Ver mais →</span>' : '';
1584
1585                        return `<div class="p-3 border-b border-gray-100 hover:bg-gray-50 cursor-pointer ${classes}"
1586                                     data-id="${n.id}" data-link="${n.link || ''}">
1587                                    <div class="flex justify-between items-start">
1588                                        <h5 class="font-semibold text-sm text-gray-800">${n.titulo}</h5>
1589                                        <span class="text-xs text-gray-400">${n.data}</span>
1590                                    </div>
1591                                    <p class="text-xs text-gray-600 mt-1">${n.mensagem}</p>
1592                                    ${linkHtml}
1593                                </div>`;
1594                    }).join('');
1595
1596                    lista.querySelectorAll('[data-id]').forEach(item => {
1597                        item.onclick = function() {
1598                            const id = this.dataset.id;
1599                            const link = this.dataset.link;
1600
1601                            fetch('notificacoes.php', {
1602                                method: 'POST',
1603                                headers: {'Content-Type': 'application/x-www-form-urlencoded'},
1604                                body: 'action=marcar_lida&id=' + id
1605                            });
1606
1607                            if(!this.classList.contains('opacity-70')) {
1608                                const total = parseInt(badge.textContent) || 0;
1609                                if(total <= 1) badge.classList.add('hidden');
1610                                else badge.textContent = total - 1;
1611                                this.classList.add('opacity-70');
1612                            }
1613
1614                            if(link) window.location.href = link;
1615                        };
1616                    });
1617                }
1618            });
1619    }
1620
1621    btnNotificacoes.onclick = function(e) {
1622        e.stopPropagation();
1623        dropdown.classList.toggle('hidden');
1624        if(!dropdown.classList.contains('hidden')) carregarNotificacoes();
1625    };
1626
1627    document.addEventListener('click', function(e) {
1628        if(!btnNotificacoes.contains(e.target) && !dropdown.contains(e.target)) {
1629            dropdown.classList.add('hidden');
1630        }
1631    });
1632
1633    document.getElementById('btn-marcar-todas')?.addEventListener('click', function(e) {
1634        e.preventDefault();
1635        fetch('notificacoes.php', {
1636            method: 'POST',
1637            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
1638            body: 'action=marcar_todas_lidas'
1639        }).then(() => {
1640            badge.classList.add('hidden');
1641            lista.querySelectorAll('[data-id]').forEach(i => i.classList.add('opacity-70'));
1642        });
1643    });
1644
1645    setInterval(() => {
1646        if(!dropdown.classList.contains('hidden')) carregarNotificacoes();
1647        else {
1648            fetch('notificacoes.php?action=listar')
1649                .then(r => r.json())
1650                .then(data => {
1651                    if(data.success && data.nao_lidas > 0) {
1652                        badge.textContent = data.nao_lidas > 99 ? '99+' : data.nao_lidas;
1653                        badge.classList.remove('hidden');
1654                    }
1655                });
1656        }
1657    }, 60000);
1658});
1659
1660// ================= DROPDOWN ESTUDOS - INTERATIVIDADE =================
1661$(document).ready(function() {
1662    $('.estudos-item[data-target]').on('click', function(e) {
1663        e.preventDefault();
1664        e.stopPropagation();
1665
1666        const targetId = $(this).data('target');
1667        const $submenu = $('#' + targetId);
1668        const $parent = $(this);
1669
1670        $parent.siblings('.estudos-submenu, .estudos-estudos-list').addClass('hidden');
1671        $parent.siblings('.estudos-item').removeClass('active');
1672
1673        $submenu.toggleClass('hidden');
1674        $parent.toggleClass('active');
1675
1676        if ($submenu.hasClass('hidden')) {
1677            $submenu.find('.estudos-submenu, .estudos-estudos-list').addClass('hidden');
1678            $submenu.find('.estudos-item').removeClass('active');
1679        }
1680    });
1681
1682    $('.estudos-estudos-list').prev('.estudos-item').on('click', function(e) {
1683        e.preventDefault();
1684        e.stopPropagation();
1685
1686        const targetId = $(this).data('target');
1687        const $list = $('#' + targetId);
1688
1689        $(this).siblings('.estudos-estudos-list').addClass('hidden');
1690        $(this).siblings('.estudos-item').removeClass('active');
1691
1692        $list.toggleClass('hidden');
1693        $(this).toggleClass('active');
1694    });
1695
1696    $(document).on('click', function(e) {
1697        if (!$(e.target).closest('#dropdown-estudos').length) {
1698            $('.estudos-submenu, .estudos-estudos-list').addClass('hidden');
1699            $('.estudos-item').removeClass('active');
1700        }
1701    });
1702
1703    $(document).on('keydown', function(e) {
1704        if (e.key === 'Escape') {
1705            $('.estudos-submenu, .estudos-estudos-list').addClass('hidden');
1706            $('.estudos-item').removeClass('active');
1707        }
1708    });
1709});
1710</script>
1710
1711
1712<!-- 8. Script de Rotação para Banner Mobile -->
1713<script>
1714(function() {
1715    if (window.innerWidth >= 768) return;
1716
1717    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"}];
1718    if (banners.length <= 1) return;
1719
1720    const mobileImg = document.querySelector('.banner-mobile-img');
1721    const mobileLink = document.querySelector('.banner-mobile-link');
1722    if (!mobileImg || !mobileLink) return;
1723
1724    let idx = 2;
1725
1726    setInterval(() => {
1727        idx = (idx + 1) % banners.length;
1728        mobileImg.style.opacity = '0.7';
1729        setTimeout(() => {
1730            mobileImg.src = banners[idx].img;
1731            mobileLink.href = banners[idx].link;
1732            mobileImg.onload = () => { mobileImg.style.opacity = '1'; };
1733        }, 200);
1734    }, 25000);
1735})();
1736</script>
1736
1737
1738<!-- 9. Verificação de Bônus (apenas para afiliados) -->
1739
1740<!-- 10. Cookie Consent -->
1741<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">
1742    <div class="max-w-4xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4">
1743        <div class="text-sm">
1744            <p class="font-medium mb-1">🍪 Cookies e Privacidade</p>
1745            <p class="text-[#94a3b8]">
1746                Usamos cookies para personalizar anúncios e melhorar sua experiência. 
1747                Ao continuar, você concorda com nossa <a href="politica_vouf.php" class="text-[#60a5fa] underline">Política de Privacidade</a>.
1748            </p>
1749        </div>
1750        <div class="flex gap-2">
1751            <button id="cookie-reject" class="px-4 py-2 bg-[#334155] hover:bg-[#475569] rounded text-sm transition">Recusar</button>
1752            <button id="cookie-accept" class="px-4 py-2 bg-[#3b82f6] hover:bg-[#2563eb] rounded text-sm font-medium transition">Aceitar</button>
1753        </div>
1754    </div>
1755</div>
1756
1757<script>
1758document.addEventListener('DOMContentLoaded', function() {
1759    const banner = document.getElementById('cookie-banner');
1760    const acceptBtn = document.getElementById('cookie-accept');
1761    const rejectBtn = document.getElementById('cookie-reject');
1762    
1763    // Verifica consentimento prévio
1764    if (!localStorage.getItem('cookie-consent')) {
1765        banner.classList.remove('hidden');
1766    }
1767    
1768    // Aceitar: permite cookies do AdSense
1769    acceptBtn.addEventListener('click', function() {
1770        localStorage.setItem('cookie-consent', 'accepted');
1771        banner.classList.add('hidden');
1772        // Aqui você pode inicializar scripts do AdSense se estiverem em delay
1773        if (typeof gtag === 'function') {
1774            gtag('consent', 'update', {'ad_storage': 'granted', 'analytics_storage': 'granted'});
1775        }
1776    });
1777    
1778    // Recusar: bloqueia cookies não essenciais
1779    rejectBtn.addEventListener('click', function() {
1780        localStorage.setItem('cookie-consent', 'rejected');
1781        banner.classList.add('hidden');
1782        // Bloqueia cookies de publicidade
1783        if (typeof gtag === 'function') {
1784            gtag('consent', 'update', {'ad_storage': 'denied', 'analytics_storage': 'denied'});
1785        }
1786    });
1787});
1788</script>
1788
1789<!-- ================= FOOTER MODERNO - TEMA ESCURO ================= -->
1790<footer style="background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%); color: #e2e8f0;" class="mt-12 border-t" data-tailwind="border-[#334155]">
1791    <!-- Seção Principal (Grid) -->
1792    <div class="max-w-7xl mx-auto px-4 py-12">
1793        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
1794
1795            <!-- COLUNA 1: Sobre + Segurança -->
1796            <div class="space-y-4">
1797                <div class="flex items-center gap-3">
1798                    <img src="LogoVouFGames.png" alt="VouF" class="h-10 w-auto">
1799                    <span class="font-bold text-lg text-white">VouF Games</span>
1800                </div>
1801                <p class="text-sm opacity-80 leading-relaxed">
1802                    Plataforma de jogos educativos que estimula o raciocínio, memória e conhecimento geral de forma divertida e segura.
1803                </p>
1804
1805                <!-- Badge de Segurança -->
1806                <div class="flex items-center gap-2 pt-2">
1807                    <i class="fas fa-shield-alt text-green-400"></i>
1808                    <span class="text-xs opacity-70">Site protegido por SSL • Dados criptografados</span>
1809                </div>
1810
1811                <!-- Redes Sociais -->
1812                <div class="flex gap-3 pt-2">
1813                    <a href="https://t.me/voufgames" target="_blank" rel="noopener"
1814                       style="background: #1e293b;" class="w-9 h-9 flex items-center justify-center rounded-full hover:bg-blue-600 transition-colors"
1815                       title="Telegram">
1816                        <i class="fab fa-telegram text-white"></i>
1817                    </a>
1818                    <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"
1819                       title="WhatsApp">
1820                        <i class="fab fa-whatsapp text-white"></i>
1821                    </a>
1822                    <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"
1823                       title="Instagram">
1824                        <i class="fab fa-instagram text-white"></i>
1825                    </a>
1826                    <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"
1827                       title="YouTube">
1828                        <i class="fab fa-youtube text-white"></i>
1829                    </a>
1830                </div>
1831            </div>
1832
1833            <!-- COLUNA 2: Links Úteis -->
1834            <div class="space-y-4">
1835                <h4 class="font-semibold text-white text-sm uppercase tracking-wide opacity-90"> Links Úteis</h4>
1836                <ul class="space-y-2 text-sm">
1837                    <li>
1838                        <a href="categorias.php" class="flex items-center gap-2 opacity-80 hover:text-blue-400 transition-colors">
1839                            <i class="fas fa-book-open w-4"></i> Material de Estudos
1840                        </a>
1841                    </li>
1842                    <li>
1843                        <a href="ranking.php" class="flex items-center gap-2 opacity-80 hover:text-blue-400 transition-colors">
1844                            <i class="fas fa-trophy w-4"></i> Ranking de Recordistas
1845                        </a>
1846                    </li>
1847                    <li>
1848                        <a href="blog.php" class="flex items-center gap-2 opacity-80 hover:text-blue-400 transition-colors">
1849                            <i class="fas fa-newspaper w-4"></i> Blog & Novidades
1850                        </a>
1851                    </li>
1852                                                        </ul>
1853            </div>
1854
1855            <!-- COLUNA 3: Institucional -->
1856            <div class="space-y-4">
1857                <h4 class="font-semibold text-white text-sm uppercase tracking-wide opacity-90">📋 Institucional</h4>
1858                <ul class="space-y-2 text-sm">
1859                    <li>
1860                        <a href="sobre.php" class="flex items-center gap-2 opacity-80 hover:text-blue-400 transition-colors">
1861                            <i class="fas fa-info-circle w-4"></i> Sobre Nós
1862                        </a>
1863                    </li>
1864                    <li>
1865                        <a href="contato.php" class="flex items-center gap-2 opacity-80 hover:text-blue-400 transition-colors" id="link-contato-footer">
1866                            <i class="fas fa-envelope w-4"></i> Contato
1867                        </a>
1868                    </li>
1869                    <li>
1870                        <a href="responsavel.php" class="flex items-center gap-2 opacity-80 hover:text-blue-400 transition-colors">
1871                            <i class="fas fa-user-shield w-4"></i> Responsável
1872                        </a>
1873                    </li>
1874                    <li>
1875                        <a href="anuncie-noVouF.php" class="flex items-center gap-2 opacity-80 hover:text-blue-400 transition-colors">
1876                            <i class="fas fa-bullhorn w-4"></i> Anuncie no VouF
1877                        </a>
1878                    </li>
1879                    <li>
1880                        <a href="politica_vouf.php" target="_blank" class="flex items-center gap-2 opacity-80 hover:text-blue-400 transition-colors">
1881                            <i class="fas fa-lock w-4"></i> Política de Privacidade
1882                        </a>
1883                    </li>
1884                    <li>
1885                        <a href="termos_vouf.php" target="_blank" class="flex items-center gap-2 opacity-80 hover:text-blue-400 transition-colors">
1886                            <i class="fas fa-file-contract w-4"></i> Termos de Uso
1887                        </a>
1888                    </li>
1889                </ul>
1890            </div>
1891
1892            <!-- COLUNA 4: Contato Protegido + Newsletter -->
1893            <div class="space-y-4">
1894                <h4 class="font-semibold text-white text-sm uppercase tracking-wide opacity-90">📬 Contato</h4>
1895
1896                <!-- Email Protegido -->
1897                <div class="space-y-2 text-sm">
1898                    <p class="opacity-80 flex items-center gap-2">
1899                        <i class="fas fa-envelope w-4"></i>
1900                        <span id="email-protected" class="select-none cursor-pointer hover:text-blue-400 transition-colors"></span>
1901                    </p>
1902
1903                    <!-- WhatsApp Protegido -->
1904                    <p class="opacity-80 flex items-center gap-2">
1905                        <i class="fab fa-whatsapp w-4"></i>
1906                        <a href="#" id="whatsapp-protected" class="hover:text-blue-400 transition-colors select-none"></a>
1907                    </p>
1908
1909                    <!-- Endereço -->
1910                    <p class="opacity-80 flex items-start gap-2">
1911                        <i class="fas fa-map-marker-alt w-4 mt-1"></i>
1912                        <span id="endereco-protected" class="select-none"></span>
1913                    </p>
1914                </div>
1915
1916                <!-- Newsletter (oculto na index pois já tem formulário próprio) -->
1917                                    <div class="pt-4 border-t" style="border-color: #334155;">
1918                        <p class="text-xs opacity-70 mb-3">Receba novidades e dicas exclusivas:</p>
1919                        <form class="newsletter-form flex gap-2">
1920                            <input type="email" placeholder="Seu e-mail" required
1921                                   style="background: #1e293b; border-color: #334155; color: white;"
1922                                   class="flex-1 px-3 py-2 rounded text-sm placeholder-opacity-50 focus:outline-none focus:border-blue-400">
1923                            <button type="submit" style="background: #3b82f6;" class="px-4 py-2 hover:bg-blue-500 text-white rounded text-sm font-medium transition">
1924                                <i class="fas fa-arrow-right"></i>
1925                            </button>
1926                        </form>
1927                        <p class="newsletter-msg text-xs mt-2 hidden"></p>
1928                    </div>
1929                            </div>
1930
1931        </div>
1932    </div>
1933
1934    <!-- Barra Inferior -->
1935    <div style="background: #0a0e17;" class="border-t" data-tailwind="border-[#334155]">
1936        <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">
1937            <p>&copy; 2026 <span class="text-white">VouF</span>. Todos os direitos reservados.</p>
1938            <div class="flex items-center gap-4">
1939                <span class="flex items-center gap-1">
1940                    <i class="fas fa-lock text-green-400"></i> Conexão segura
1941                </span>
1942                <span class="flex items-center gap-1">
1943                    <i class="fas fa-cookie text-blue-400"></i>
1944                    <a href="politica_vouf.php#cookies" class="hover:text-blue-400">Cookies</a>
1945                </span>
1946            </div>
1947        </div>
1948    </div>
1949</footer>
1950
1951<!-- 11. Scripts de Proteção Anti-Robô -->
1952<script>
1953document.addEventListener('DOMContentLoaded', function() {
1954
1955    // ===== NEWSLETTER UNIFICADA (footer E index) =====
1956    document.querySelectorAll('.newsletter-form').forEach(function(form) {
1957        form.addEventListener('submit', function(e) {
1958            e.preventDefault();
1959
1960            const emailInput = this.querySelector('input[type="email"]');
1961            const email = emailInput.value.trim();
1962            const msgEl = this.querySelector('.newsletter-msg');
1963            const btn = this.querySelector('button[type="submit"]');
1964
1965            if (!email.includes('@') || !email.includes('.')) {
1966                if (msgEl) {
1967                    msgEl.textContent = '⚠️ Digite um e-mail válido.';
1968                    msgEl.className = 'newsletter-msg text-xs mt-2 text-red-400';
1969                    msgEl.classList.remove('hidden');
1970                }
1971                return;
1972            }
1973
1974            btn.disabled = true;
1975            const originalHTML = btn.innerHTML;
1976            btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
1977
1978            fetch('api.php', {
1979                method: 'POST',
1980                headers: {'Content-Type': 'application/x-www-form-urlencoded'},
1981                body: 'action=newsletter_subscribe&email=' + encodeURIComponent(email)
1982            })
1983            .then(r => r.json())
1984            .then(data => {
1985                btn.disabled = false;
1986                btn.innerHTML = originalHTML;
1987
1988                if (msgEl) {
1989                    if (data.success) {
1990                        msgEl.textContent = '✅ ' + data.message;
1991                        msgEl.className = 'newsletter-msg text-xs mt-2 text-green-400';
1992                        emailInput.value = '';
1993                        form.reset();
1994                    } else {
1995                        msgEl.textContent = '⚠️ ' + data.message;
1996                        msgEl.className = 'newsletter-msg text-xs mt-2 text-yellow-400';
1997                    }
1998                    msgEl.classList.remove('hidden');
1999                    setTimeout(() => msgEl.classList.add('hidden'), 5000);
2000                }
2001            })
2002            .catch(err => {
2003                btn.disabled = false;
2004                btn.innerHTML = originalHTML;
2005                if (msgEl) {
2006                    msgEl.textContent = '❌ Erro de conexão. Tente novamente.';
2007                    msgEl.className = 'newsletter-msg text-xs mt-2 text-red-400';
2008                    msgEl.classList.remove('hidden');
2009                }
2010            });
2011        });
2012    });
2013
2014    // ===== PROTEÇÃO DE EMAIL =====
2015    const emailParts = ['contato', 'appvouf.com.br'];
2016    const email = emailParts[0] + '@' + emailParts[1];
2017    const emailEl = document.getElementById('email-protected');
2018    if(emailEl) {
2019        emailEl.textContent = email;
2020        emailEl.addEventListener('click', function(e) {
2021            e.preventDefault();
2022            window.location.href = 'mailto:' + email;
2023        });
2024    }
2025
2026    // ===== PROTEÇÃO DE WHATSAPP =====
2027    const whatsappNumber = '5511999999999';
2028    const whatsappText = encodeURIComponent('Olá! Vim pelo site VouF Games e gostaria de mais informações.');
2029    const whatsappLink = `https://wa.me/${whatsappNumber}?text=${whatsappText}`;
2030
2031    const $whatsappLink = document.getElementById('whatsapp-protected');
2032    const $whatsappIcon = document.getElementById('link-whatsapp-footer');
2033
2034    function ativarWhatsApp(e) {
2035        e.preventDefault();
2036        window.open(whatsappLink, '_blank', 'noopener,noreferrer');
2037    }
2038
2039    if ($whatsappLink) $whatsappLink.addEventListener('click', ativarWhatsApp);
2040    if ($whatsappIcon) $whatsappIcon.addEventListener('click', ativarWhatsApp);
2041
2042    setTimeout(() => {
2043        if ($whatsappLink) $whatsappLink.textContent = 'WhatsApp';
2044    }, 2000);
2045
2046    // ===== PROTEÇÃO DE ENDEREÇO =====
2047    const enderecoParts = ['São Paulo', 'SP', 'Brasil'];
2048    const enderecoEl = document.getElementById('endereco-protected');
2049    if(enderecoEl) enderecoEl.textContent = enderecoParts.join(' - ');
2050
2051    // ===== REDES SOCIAIS (links gerados via JS) =====
2052    const socialLinks = {
2053        instagram: 'https://instagram.com/voufgames',
2054        youtube: 'https://youtube.com/@voufgames'
2055    };
2056
2057    Object.keys(socialLinks).forEach(platform => {
2058        const el = document.getElementById(`link-${platform}-footer`);
2059        if (el) {
2060            el.addEventListener('click', function(e) {
2061                e.preventDefault();
2062                window.open(socialLinks[platform], '_blank', 'noopener,noreferrer');
2063            });
2064        }
2065    });
2066
2067    // ===== PROTEÇÃO ADICIONAL: Desabilitar seleção de texto =====
2068    document.querySelectorAll('.select-none').forEach(el => {
2069        el.style.userSelect = 'none';
2070        el.addEventListener('contextmenu', e => e.preventDefault());
2071    });
2072
2073    // ===== PROTEÇÃO: Ofuscar links institucionais =====
2074    const contatoLink = document.getElementById('link-contato-footer');
2075    if (contatoLink) {
2076        contatoLink.addEventListener('click', function(e) {
2077            e.preventDefault();
2078            window.location.href = 'contato.php';
2079        });
2080    }
2081});
2082</script>
2082
2083
2084<!-- 12. Estilos Adicionais (CSS Puro para garantir cores) -->
2085<style>
2086/* Cores escuras garantidas via CSS puro (compatível com Tailwind v2) */
2087footer {
2088    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
2089    color: #e2e8f0;
2090}
2091
2092footer .border-t {
2093    border-color: #334155 !important;
2094}
2095
2096footer a {
2097    color: #94a3b8;
2098    transition: color 0.2s, transform 0.2s;
2099}
2100
2101footer a:hover {
2102    color: #60a5fa !important;
2103    transform: translateX(2px);
2104}
2105
2106footer input {
2107    background: #1e293b !important;
2108    border-color: #334155 !important;
2109    color: white !important;
2110}
2111
2112footer input::placeholder {
2113    color: #64748b !important;
2114}
2115
2116footer input:focus {
2117    border-color: #60a5fa !important;
2118    outline: none;
2119}
2120
2121footer button[type="submit"] {
2122    background: #3b82f6 !important;
2123}
2124
2125footer button[type="submit"]:hover {
2126    background: #2563eb !important;
2127}
2128
2129footer [class*="rounded-full"]:hover {
2130    transform: translateY(-2px);
2131    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
2132}
2133
2134@keyframes fadeInUp {
2135    from { opacity: 0; transform: translateY(20px); }
2136    to { opacity: 1; transform: translateY(0); }
2137}
2138
2139footer {
2140    animation: fadeInUp 0.4s ease-out;
2141}
2142
2143@media (max-width: 768px) {
2144    footer .grid {
2145        grid-template-columns: 1fr !important;
2146        text-align: center;
2147    }
2148
2149    footer .flex.items-center {
2150        justify-content: center;
2151    }
2152
2153    footer ul {
2154        text-align: left;
2155    }
2156
2157    footer [class*="rounded-full"] {
2158        margin: 0 auto;
2159    }
2160}
2161
2162.select-none {
2163    user-select: none;
2164    -webkit-user-select: none;
2165    -moz-user-select: none;
2166    -ms-user-select: none;
2167}
2168</style>
2169
2170</body>
2171</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.