Hugging Face's logo

Spaces:
JairoDanielMT
/
fuga
Running

App Files Community
JairoDanielMT commited on
Commit
ca30aaa
·
verified ·
1 Parent(s): 6978f6e

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +489 -19
index.html CHANGED
@@ -1,19 +1,489 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ <title>Crise de Dados 2030 - Futuro & Inovação S.A.</title>
7
+
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
11
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
12
+
13
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
14
+
15
+ <style>
16
+ /* --- VARIABLES & RESET --- */
17
+ :root {
18
+ --primary: #DC2626; /* Rojo Alerta/Crisis */
19
+ --accent: #2563EB; /* Azul Corporativo */
20
+ --dark: #0F172A; /* Slate Dark */
21
+ --light: #F8FAFC; /* Slate Light */
22
+ --text-main: #334155;
23
+ --white: #FFFFFF;
24
+
25
+ --fs-h1: clamp(2rem, 3.5vw, 3.5rem);
26
+ --fs-h2: clamp(1.4rem, 2.5vw, 2rem);
27
+ --fs-body: clamp(0.85rem, 1.2vw, 1rem);
28
+ }
29
+
30
+ * { box-sizing: border-box; margin: 0; padding: 0; }
31
+
32
+ body {
33
+ background-color: #111;
34
+ font-family: 'Inter', sans-serif;
35
+ height: 100vh;
36
+ display: flex;
37
+ justify-content: center;
38
+ align-items: center;
39
+ overflow: hidden;
40
+ color: var(--text-main);
41
+ }
42
+
43
+ /* --- CONTENEDOR 16:9 HD --- */
44
+ .presentation-stage {
45
+ width: min(95vw, 1280px);
46
+ aspect-ratio: 16 / 9;
47
+ background: var(--light);
48
+ position: relative;
49
+ box-shadow: 0 0 50px rgba(0,0,0,0.7);
50
+ border-radius: 8px;
51
+ overflow: hidden;
52
+ }
53
+
54
+ /* --- SLIDES --- */
55
+ .slide {
56
+ position: absolute;
57
+ inset: 0;
58
+ display: flex;
59
+ flex-direction: column;
60
+ opacity: 0;
61
+ transform: translateX(20px);
62
+ transition: opacity 0.4s ease, transform 0.4s ease;
63
+ pointer-events: none;
64
+ background: var(--white);
65
+ padding: 3rem 4rem;
66
+ }
67
+
68
+ .slide.active {
69
+ opacity: 1;
70
+ transform: translateX(0);
71
+ pointer-events: all;
72
+ z-index: 10;
73
+ }
74
+
75
+ /* --- TYPOGRAPHY & LAYOUT --- */
76
+ .header {
77
+ margin-bottom: 1.5rem;
78
+ border-bottom: 2px solid #E2E8F0;
79
+ padding-bottom: 10px;
80
+ display: flex;
81
+ justify-content: space-between;
82
+ align-items: end;
83
+ }
84
+
85
+ .header h2 {
86
+ font-size: var(--fs-h2);
87
+ color: var(--dark);
88
+ text-transform: uppercase;
89
+ font-weight: 800;
90
+ margin: 0;
91
+ }
92
+
93
+ .header .page-num {
94
+ font-family: 'JetBrains Mono', monospace;
95
+ color: var(--primary);
96
+ font-weight: bold;
97
+ }
98
+
99
+ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; height: 100%; }
100
+ .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.5rem; height: 100%; }
101
+
102
+ .card {
103
+ background: var(--white);
104
+ border: 1px solid #E2E8F0;
105
+ border-radius: 8px;
106
+ padding: 1.2rem;
107
+ box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
108
+ display: flex;
109
+ flex-direction: column;
110
+ }
111
+
112
+ .card h3 { font-size: 1rem; color: var(--primary); margin-bottom: 0.8rem; text-transform: uppercase; font-weight: 700; }
113
+ .card ul { padding-left: 1.2rem; }
114
+ .card li { margin-bottom: 0.5rem; font-size: var(--fs-body); color: var(--text-main); line-height: 1.4; }
115
+
116
+ /* --- DIAGRAMS --- */
117
+ .tech-stack {
118
+ display: flex; flex-direction: column; gap: 10px;
119
+ background: #1E293B; padding: 1.5rem; border-radius: 8px; color: white;
120
+ height: 100%; justify-content: center;
121
+ }
122
+
123
+ .layer {
124
+ background: rgba(255,255,255,0.1); padding: 10px; border-radius: 4px;
125
+ text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 0.9rem;
126
+ border: 1px dashed #475569;
127
+ }
128
+
129
+ .layer strong { color: var(--primary); display: block; font-size: 0.75rem; margin-bottom: 5px; }
130
+
131
+ /* --- COVER --- */
132
+ .cover-container {
133
+ height: 100%; display: flex; flex-direction: column; justify-content: center;
134
+ border-left: 10px solid var(--primary); padding-left: 3rem;
135
+ }
136
+
137
+ .cover-year {
138
+ font-family: 'JetBrains Mono', monospace; font-size: 1.5rem; color: var(--text-main); font-weight: bold;
139
+ margin-bottom: 1rem;
140
+ }
141
+
142
+ /* --- CONTROLS --- */
143
+ .controls { position: absolute; bottom: 20px; right: 20px; display: flex; gap: 10px; z-index: 100; }
144
+
145
+ .btn-nav {
146
+ background: var(--dark); color: white; border: none; width: 40px; height: 40px;
147
+ border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;
148
+ transition: background 0.2s;
149
+ }
150
+ .btn-nav:hover { background: var(--primary); }
151
+
152
+ .progress { position: absolute; bottom: 0; left: 0; height: 4px; background: var(--primary); width: 0%; transition: width 0.3s; }
153
+
154
+ /* --- UTILS --- */
155
+ .badge { background: #fee2e2; color: #991b1b; padding: 2px 6px; border-radius: 4px; font-size: 0.8rem; font-weight: bold; }
156
+ .grammar-focus { color: var(--accent); font-weight: bold; font-family: 'JetBrains Mono', monospace; font-size: 0.9em; }
157
+ </style>
158
+ </head>
159
+ <body>
160
+
161
+ <div class="presentation-stage" id="presentation">
162
+ <div class="progress"></div>
163
+
164
+ <!-- SLIDE 1: PORTADA -->
165
+ <div class="slide active">
166
+ <div class="cover-container">
167
+ <div class="cover-year">2030</div>
168
+ <h1 style="font-size: var(--fs-h1); font-weight: 900; line-height: 1.1; margin-bottom: 1.5rem; color: var(--dark);">
169
+ CRISE DE<br>
170
+ <span style="color: var(--primary);">FUGA DE DADOS<br>CONFIDENCIAIS</span>
171
+ </h1>
172
+ <p style="font-size: var(--fs-h2); color: #64748B; font-weight: 300;">Futuro & Inovação S.A.</p>
173
+ <br>
174
+ <p style="font-size: var(--fs-h3); color: #64748B; font-weight: 300;">> ANDRES ALFREDO REJAS RAMIREZ</p>
175
+ <p style="font-size: var(--fs-h3); color: #64748B; font-weight: 300;">> EDSON EMANUEL ALVARADO PRIETO</p>
176
+ <p style="font-size: var(--fs-h3); color: #64748B; font-weight: 300;">> JAIRO DANIEL MENDOZA TORRES</p>
177
+
178
+ <div style="margin-top: 3rem;">
179
+ <p style="font-family: 'JetBrains Mono', monospace; font-weight: 700;">PORTUGUÊS INTERMEDIÁRIO 1-2</p>
180
+ </div>
181
+ </div>
182
+ </div>
183
+
184
+ <!-- SLIDE 2: CONTEXTO -->
185
+ <div class="slide">
186
+ <div class="header">
187
+ <h2>1. O Cenário da Crise (2030)</h2>
188
+ <span class="page-num">02</span>
189
+ </div>
190
+ <div class="grid-2">
191
+ <div class="card">
192
+ <h3><i class="fa-solid fa-triangle-exclamation"></i> O Incidente</h3>
193
+ <p style="font-size: 0.9rem; margin-bottom: 10px;">Na manhã de hoje, nossos sistemas detectaram uma intrusão massiva. Dados de 50.000 clientes corporativos foram expostos na Dark Web.</p>
194
+ <ul>
195
+ <li><strong>Dados Vazados:</strong> Números de cartões virtuais, endereços biométricos e contratos inteligentes (Smart Contracts).</li>
196
+ <li><strong>Origem:</strong> Falha no protocolo de segurança quântica.</li>
197
+ </ul>
198
+ </div>
199
+ <div class="card">
200
+ <h3><i class="fa-solid fa-users"></i> A Equipe de Crise</h3>
201
+ <p style="font-size: 0.9rem; margin-bottom: 10px;">Estamos reunidos para tomar decisões rápidas e comunicar as soluções.</p>
202
+ <ul>
203
+ <li><strong>Objetivo:</strong> Conter o vazamento e restaurar a confiança.</li>
204
+ <li><strong>Gramática Foco:</strong> Uso imperativo para ordens e futuro para promessas.</li>
205
+ </ul>
206
+ </div>
207
+ </div>
208
+ </div>
209
+
210
+ <!-- SLIDE 3: IMPACTO -->
211
+ <div class="slide">
212
+ <div class="header">
213
+ <h2>2. Análise de Impacto Imediato</h2>
214
+ <span class="page-num">03</span>
215
+ </div>
216
+ <div class="grid-3">
217
+ <div class="card">
218
+ <h3><i class="fa-solid fa-chart-line-down"></i> Financeiro</h3>
219
+ <ul>
220
+ <li>Queda de 15% nas ações da Futuro & Inovação S.A. nas últimas 4 horas.</li>
221
+ <li>Risco de multas milionárias pela nova LGPD Global de 2028.</li>
222
+ </ul>
223
+ </div>
224
+ <div class="card">
225
+ <h3><i class="fa-solid fa-handshake-slash"></i> Reputacional</h3>
226
+ <ul>
227
+ <li>Perda de credibilidade com parceiros internacionais.</li>
228
+ <li>Tendência negativa nas redes sociais neurais.</li>
229
+ </ul>
230
+ </div>
231
+ <div class="card">
232
+ <h3><i class="fa-solid fa-lock-open"></i> Operacional</h3>
233
+ <ul>
234
+ <li>Paralisação temporária dos servidores principais.</li>
235
+ <li>Necessidade de redefinição de todas as chaves de acesso.</li>
236
+ </ul>
237
+ </div>
238
+ </div>
239
+ </div>
240
+
241
+ <!-- SLIDE 4: AÇÕES IMEDIATAS (IMPERATIVO) -->
242
+ <div class="slide">
243
+ <div class="header">
244
+ <h2>3. Ordens de Emergência <span style="font-size:0.6em; color:var(--accent)">(Imperativo)</span></h2>
245
+ <span class="page-num">04</span>
246
+ </div>
247
+ <div style="display: flex; gap: 20px; height: 100%;">
248
+ <div class="card" style="flex: 1; border-left: 4px solid var(--primary);">
249
+ <h3><i class="fa-solid fa-walkie-talkie"></i> Comandos para a Equipe de TI</h3>
250
+ <p style="margin-bottom:1rem; font-size:0.9rem;">Para conter a fuga, é necessário agir agora:</p>
251
+ <ul>
252
+ <li><span class="grammar-focus">Desliguem</span> imediatamente os servidores externos.</li>
253
+ <li><span class="grammar-focus">Isolem</span> a rede afetada para evitar contaminação.</li>
254
+ <li><span class="grammar-focus">Façam</span> o backup dos logs de segurança agora mesmo.</li>
255
+ <li><span class="grammar-focus">Não permitam</span> nenhum acesso remoto até segunda ordem.</li>
256
+ </ul>
257
+ </div>
258
+ <div class="card" style="flex: 1;">
259
+ <h3><i class="fa-solid fa-bullhorn"></i> Comandos para a Equipe de PR</h3>
260
+ <ul>
261
+ <li><span class="grammar-focus">Preparem</span> um comunicado oficial para a imprensa.</li>
262
+ <li><span class="grammar-focus">Sejam</span> transparentes com os investidores.</li>
263
+ <li><span class="grammar-focus">Monitorem</span> as redes sociais em tempo real.</li>
264
+ </ul>
265
+ </div>
266
+ </div>
267
+ </div>
268
+
269
+ <!-- SLIDE 5: FUTURO DO PRESENTE -->
270
+ <div class="slide">
271
+ <div class="header">
272
+ <h2>4. O Que Faremos a Seguir? <span style="font-size:0.6em; color:var(--accent)">(Futuro do Presente)</span></h2>
273
+ <span class="page-num">05</span>
274
+ </div>
275
+ <div class="grid-2">
276
+ <div style="padding-right: 20px;">
277
+ <p style="margin-bottom: 1rem;">Nosso compromisso para os próximos dias é claro. Nós reconstruiremos a infraestrutura.</p>
278
+ <ul style="line-height: 2;">
279
+ <li>Nós <span class="grammar-focus">investigaremos</span> a origem exata do ataque.</li>
280
+ <li>A empresa <span class="grammar-focus">reembolsará</span> todos os clientes afetados.</li>
281
+ <li>Nós <span class="grammar-focus">implementaremos</span> uma nova barreira de IA defensiva.</li>
282
+ <li>Os diretores <span class="grammar-focus">darão</span> uma coletiva de imprensa amanhã.</li>
283
+ </ul>
284
+ </div>
285
+ <div class="tech-stack">
286
+ <div class="layer">
287
+ <strong>NOVA ESTRUTURA DE DEFESA</strong>
288
+ Segurança Quântica | IA Preditiva
289
+ </div>
290
+ <div class="layer" style="border-style: solid; border-color: var(--accent);">
291
+ <strong>AÇÕES FUTURAS</strong>
292
+ Nós <span class="grammar-focus">criaremos</span> protocolos mais rígidos.
293
+ </div>
294
+ <div class="layer">
295
+ <strong>RESULTADO ESPERADO</strong>
296
+ A confiança <span class="grammar-focus">voltará</span> em breve.
297
+ </div>
298
+ </div>
299
+ </div>
300
+ </div>
301
+
302
+ <!-- SLIDE 6: PRESENTE DO SUBJUNTIVO -->
303
+ <div class="slide">
304
+ <div class="header">
305
+ <h2>5. Condições e Desejos <span style="font-size:0.6em; color:var(--accent)">(Presente do Subjuntivo)</span></h2>
306
+ <span class="page-num">06</span>
307
+ </div>
308
+ <div class="grid-2">
309
+ <div class="card">
310
+ <h3><i class="fa-solid fa-comments"></i> Expectativas da Diretoria</h3>
311
+ <p style="font-size:0.9rem; margin-bottom:1rem;">Para que a crise acabe, precisamos de colaboração.</p>
312
+ <ul>
313
+ <li>É fundamental que a equipe <span class="grammar-focus">mantenha</span> a calma.</li>
314
+ <li>Espero que os técnicos <span class="grammar-focus">resolvam</span> a falha hoje.</li>
315
+ <li>É importante que nós <span class="grammar-focus">sejamos</span> honestos com o público.</li>
316
+ <li>Talvez o hacker ainda <span class="grammar-focus">esteja</span> no sistema.</li>
317
+ </ul>
318
+ </div>
319
+ <div class="card" style="border-left: 4px solid #F59E0B;">
320
+ <h3><i class="fa-solid fa-scale-balanced"></i> Requisitos Legais</h3>
321
+ <p style="font-size:0.9rem; margin-bottom:1rem;">Advogados recomendam cautela.</p>
322
+ <ul>
323
+ <li>Recomendo que você não <span class="grammar-focus">fale</span> com a imprensa sem autorização.</li>
324
+ <li>Para que a empresa não <span class="grammar-focus">pague</span> multas, agiremos rápido.</li>
325
+ <li>Duvido que eles <span class="grammar-focus">tenham</span> acesso aos dados biométricos.</li>
326
+ </ul>
327
+ </div>
328
+ </div>
329
+ </div>
330
+
331
+ <!-- SLIDE 7: PLANO DE RECUPERAÇÃO -->
332
+ <div class="slide">
333
+ <div class="header">
334
+ <h2>6. Estratégia de Recuperação</h2>
335
+ <span class="page-num">07</span>
336
+ </div>
337
+ <div class="grid-3">
338
+ <div class="card">
339
+ <h3><i class="fa-solid fa-shield-halved"></i> Tecnologia</h3>
340
+ <ul>
341
+ <li>Nós <span class="grammar-focus">atualizaremos</span> todos os firewalls.</li>
342
+ <li><span class="grammar-focus">Contratem</span> especialistas em cibersegurança (Imperativo).</li>
343
+ </ul>
344
+ </div>
345
+ <div class="card">
346
+ <h3><i class="fa-solid fa-hand-holding-heart"></i> Cliente</h3>
347
+ <ul>
348
+ <li>É necessário que o cliente <span class="grammar-focus">sinta</span> segurança novamente.</li>
349
+ <li>Nós <span class="grammar-focus">ofereceremos</span> 1 ano de monitoramento gratuito.</li>
350
+ </ul>
351
+ </div>
352
+ <div class="card">
353
+ <h3><i class="fa-solid fa-gavel"></i> Jurídico</h3>
354
+ <ul>
355
+ <li>Espero que o governo <span class="grammar-focus">aceite</span> nosso plano de contingência.</li>
356
+ <li>Nós <span class="grammar-focus">cooperaremos</span> com a polícia federal.</li>
357
+ </ul>
358
+ </div>
359
+ </div>
360
+ </div>
361
+
362
+ <!-- SLIDE 8: HOJA DE RUTA (TIMELINE) -->
363
+ <div class="slide">
364
+ <div class="header">
365
+ <h2>7. Cronograma de Resolução</h2>
366
+ <span class="page-num">08</span>
367
+ </div>
368
+ <div style="display: flex; flex-direction: column; gap: 15px; height: 80%; justify-content: center;">
369
+
370
+ <div style="display: flex; align-items: center; gap: 20px;">
371
+ <div style="width: 150px; font-weight: bold; color: var(--primary);">FASE 1: HOJE<br><span style="font-size:0.8rem; color:#666;">Contenção</span></div>
372
+ <div style="flex: 1; background: #fee2e2; padding: 15px; border-radius: 6px; border-left: 5px solid var(--primary);">
373
+ <strong>Imperativo:</strong> <span class="grammar-focus">Parem</span> o vazamento! <span class="grammar-focus">Bloqueiem</span> os acessos! A prioridade é estancar a perda de dados.
374
+ </div>
375
+ </div>
376
+
377
+ <div style="display: flex; align-items: center; gap: 20px;">
378
+ <div style="width: 150px; font-weight: bold; color: var(--accent);">FASE 2: AMANHÃ<br><span style="font-size:0.8rem; color:#666;">Comunicação</span></div>
379
+ <div style="flex: 1; background: #EFF6FF; padding: 15px; border-radius: 6px; border-left: 5px solid var(--accent);">
380
+ <strong>Futuro:</strong> Nós <span class="grammar-focus">falaremos</span> com os clientes. A empresa <span class="grammar-focus">explicará</span> o ocorrido e <span class="grammar-focus">pedirá</span> desculpas.
381
+ </div>
382
+ </div>
383
+
384
+ <div style="display: flex; align-items: center; gap: 20px;">
385
+ <div style="width: 150px; font-weight: bold; color: var(--dark);">FASE 3: MÊS QUE VEM<br><span style="font-size:0.8rem; color:#666;">Prevenção</span></div>
386
+ <div style="flex: 1; background: #F8FAFC; padding: 15px; border-radius: 6px; border-left: 5px solid var(--dark);">
387
+ <strong>Subjuntivo:</strong> É essencial que nós <span class="grammar-focus">treinemos</span> os funcionários para que isso não <span class="grammar-focus">aconteça</span> novamente.
388
+ </div>
389
+ </div>
390
+
391
+ </div>
392
+ </div>
393
+
394
+ <!-- SLIDE 9: CONCLUSÃO -->
395
+ <div class="slide">
396
+ <div class="header">
397
+ <h2>8. Considerações Finais</h2>
398
+ <span class="page-num">09</span>
399
+ </div>
400
+ <div class="grid-2">
401
+ <div class="card">
402
+ <h3><i class="fa-solid fa-check-double"></i> Resumo</h3>
403
+ <p style="margin-bottom: 10px;">A situação é crítica, mas controlável.</p>
404
+ <ul>
405
+ <li>Utilizamos o <strong>Imperativo</strong> para ações imediatas de crise.</li>
406
+ <li>Usamos o <strong>Futuro do Presente</strong> para garantir estabilidade a longo prazo.</li>
407
+ <li>Aplicamos o <strong>Presente do Subjuntivo</strong> para expressar desejos, dúvidas e condições necessárias.</li>
408
+ </ul>
409
+ </div>
410
+ <div class="card" style="justify-content: center; align-items: center; text-align: center;">
411
+ <i class="fa-solid fa-fingerprint" style="font-size: 4rem; color: var(--primary); margin-bottom: 20px;"></i>
412
+ <p>A segurança da <strong>Futuro & Inovação S.A.</strong> depende da nossa ação rápida hoje.</p>
413
+ </div>
414
+ </div>
415
+ </div>
416
+
417
+ <!-- SLIDE 10: CIERRE -->
418
+ <div class="slide">
419
+ <div class="header">
420
+ <h2>9. Perguntas e Respostas</h2>
421
+ <span class="page-num">10</span>
422
+ </div>
423
+ <div style="display: flex; align-items: center; justify-content: center; height: 100%; text-align: center;">
424
+ <div class="card" style="max-width: 800px; padding: 2rem; border-top: 5px solid var(--primary);">
425
+ <h3 style="font-size: 1.5rem; text-align: center;">Obrigado pela Atenção</h3>
426
+ <p style="font-size: 1.1rem; line-height: 1.6; color: var(--text-main); margin-top: 1rem;">
427
+ Estamos prontos para responder às suas dúvidas sobre o plano de contenção.
428
+ </p>
429
+
430
+ <div style="margin-top: 2rem; display: flex; justify-content: center; gap: 2rem;">
431
+ <div>
432
+ <p style="font-weight: bold; color: var(--dark);">Andres Rejas</p>
433
+ <span style="font-size: 0.8rem;">Diretor de TI</span>
434
+ </div>
435
+ <div>
436
+ <p style="font-weight: bold; color: var(--dark);">Edson Alvarado</p>
437
+ <span style="font-size: 0.8rem;">Gerente de Segurança</span>
438
+ </div>
439
+ <div>
440
+ <p style="font-weight: bold; color: var(--dark);">Jairo Mendoza</p>
441
+ <span style="font-size: 0.8rem;">Chefe de Comunicação</span>
442
+ </div>
443
+ </div>
444
+
445
+ <p style="font-family: 'JetBrains Mono', monospace; font-weight: 700; margin-top: 3rem; color: var(--accent);">
446
+ FUTURO & INOVAÇÃO S.A. | 2030
447
+ </p>
448
+ </div>
449
+ </div>
450
+ </div>
451
+
452
+ <div class="controls">
453
+ <button class="btn-nav" onclick="moveSlide(-1)"><i class="fa-solid fa-chevron-left"></i></button>
454
+ <button class="btn-nav" onclick="moveSlide(1)"><i class="fa-solid fa-chevron-right"></i></button>
455
+ </div>
456
+ </div>
457
+
458
+ <script>
459
+ let currentSlide = 0;
460
+ const slides = document.querySelectorAll('.slide');
461
+ const progressBar = document.querySelector('.progress');
462
+
463
+ function updateUI() {
464
+ slides.forEach((slide, index) => {
465
+ slide.classList.remove('active');
466
+ if (index === currentSlide) slide.classList.add('active');
467
+ });
468
+ const progress = ((currentSlide + 1) / slides.length) * 100;
469
+ progressBar.style.width = `${progress}%`;
470
+ }
471
+
472
+ function moveSlide(dir) {
473
+ const next = currentSlide + dir;
474
+ if (next >= 0 && next < slides.length) {
475
+ currentSlide = next;
476
+ updateUI();
477
+ }
478
+ }
479
+
480
+ document.addEventListener('keydown', (e) => {
481
+ if (e.key === 'ArrowRight') moveSlide(1);
482
+ if (e.key === 'ArrowLeft') moveSlide(-1);
483
+ });
484
+
485
+ // Initialize
486
+ updateUI();
487
+ </script>
488
+ </body>
489
+ </html>