PageSourceSearch

https://marvitel.com.br/servicos/link-dedicado.html

html marvitel.com.br collected 2026-10-08 12:28:42 UTC 82,078 bytes, 1,118 lines download raw bytes

1<!DOCTYPE html>
2<html lang="pt-BR">
3
4<head>
5    <meta charset="UTF-8" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <title>Marvitel — Link Dedicado</title>
8    <meta name="description"
9        content="Conexão de Internet Link Dedicado exclusiva e de alta performance. Tenha segurança e garantia de 100% da velocidade de banda contratada (upload/download simétrico).">
10    <!-- Google Fonts: Sora -->
11    <link rel="preconnect" href="https://fonts.googleapis.com" />
12    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
13    <link
14        href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Sora:[email protected]&display=swap"
15        rel="stylesheet" />
16    <!-- Tailwind CSS CDN -->
17    
17<script src="https://cdn.tailwindcss.com"></script>
17
18    
18<script>
19        tailwind.config = {
20            theme: {
21                extend: {
22                    fontFamily: {
23                        sora: ['Sora', 'sans-serif'],
24                    },
25                    colors: {
26                        'background': '#f7f7f7',
27                        'azul-tradicao': '#1DA5B3',
28                        'rio-sergipe': '#045163',
29                        'chao-batido': '#474F54',
30                        'noite': '#132128',
31                        'mangue': '#BBDBDF',
32                    },
33                },
34            },
35        }
36    </script>
36
37    <link rel="stylesheet" href="../index.css" />
38    <style>
39        /* Estilo específico para o banner de hospedagem */
40        .hospedagem-hero {
41            background: linear-gradient(to bottom, #def1f3 0%, #ffffff 50%);
42            position: relative;
43            min-height: 500px;
44            display: flex;
45            align-items: center;
46            overflow: hidden;
47        }
48
49        .hospedagem-banner-img {
50            position: absolute;
51            top: 0;
52            left: 0;
53            width: 100%;
54            height: 100%;
55            object-fit: cover;
56            z-index: 1;
57            opacity: 0.5;
58            mix-blend-mode: multiply;
59            /* Para garantir que o gradiente por trás apareça se o branco for sólido no PNG, ou apenas overlay se for transparente */
60        }
61
62        /* Se a imagem for transparente, o multiply pode não ser necessário, mas ajuda se houver um fundo branco na imagem */
63        .hospedagem-hero-content {
64            position: relative;
65            z-index: 10;
66        }
67    </style>
68    <link rel="icon" type="image/png" href="../img/institucional/simbolo%20colorido.png" />
vendor: 81 bytes, lines 68-69
68
69    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
70</head>
71
72<body class="bg-white font-sora overflow-x-hidden">
73    <!-- ══════════════════════════════════════════════
74       HEADER FIXO (herdado da index.html)
75  ══════════════════════════════════════════════ -->
76    <header class="absolute top-0 left-0 w-full z-50">
77        <!-- Top Bar -->
78        <div class="w-full border-b border-white/5 text-xs" style="background-color:#0C5961; color:#78A7A4;">
79            <div class="w-full px-6 md:px-12 lg:px-10 xl:px-20 2xl:px-32 py-1.5 flex items-center justify-between">
80                <a href="https://marvitel.conecte.ai/" target="_blank"
81                    class="uppercase tracking-widest text-[10px] font-light" style="color:#78A7A4;">Assine Online</a>
82                <div class="flex items-center gap-4" style="color:#78A7A4;">
83                    <a href="https://api.whatsapp.com/send?phone=558006068075&text=Ol%C3%A1!%20Venho%20atrav%C3%A9s%20do%20site%20da%20Marvitel%20e%20gostaria%20de%20saber%20mais%20sobre%20os%20servi%C3%A7os%20que%20voc%C3%AAs%20oferecem."
84                        target="_blank"
85                        class="uppercase tracking-widest text-[10px] font-light hover:text-white transition-colors">0800
86                        606 8075</a>
87                    <a href="http://fb.com/marvitel.se" target="_blank" aria-label="Facebook"
88                        style="color:#78A7A4;"><svg class="w-3.5 h-3.5 fill-current" viewBox="0 0 24 24">
89                            <path
90                                d="M22 12A10 10 0 1 0 12 22v-7H9v-3h3V9.5C12 6.8 13.7 5 16.3 5c1.2 0 2.4.2 2.4.2v2.6h-1.4c-1.4 0-1.8.9-1.8 1.8V12h3.1l-.5 3H15.5v7A10 10 0 0 0 22 12z" />
91                        </svg></a>
92                    <a href="https://www.instagram.com/marvitel.se/" target="_blank" aria-label="Instagram"
93                        style="color:#78A7A4;"><svg class="w-3 h-3 fill-current" viewBox="0 0 24 24">
94                            <path
95                                d="M12 2.2c3.2 0 3.6 0 4.9.1 3.3.1 4.8 1.7 4.9 4.9.1 1.3.1 1.6.1 4.8s0 3.6-.1 4.8c-.1 3.2-1.6 4.8-4.9 4.9-1.3.1-1.6.1-4.9.1s-3.6 0-4.8-.1C3.7 21.6 2.2 20 2.1 16.8 2 15.6 2 15.2 2 12s0-3.6.1-4.8C2.2 3.9 3.8 2.3 7.2 2.2c1.2-.1 1.6-.1 4.8-.1zm0-2.2C8.7 0 8.3 0 7.1.1 2.7.3.3 2.7.1 7.1 0 8.3 0 8.7 0 12s0 3.7.1 4.9c.2 4.4 2.6 6.8 7 7C8.3 24 8.7 24 12 24s3.7 0 4.9-.1c4.4-.2 6.8-2.6 7-7 .1-1.2.1-1.6.1-4.9s0-3.7-.1-4.9C23.7 2.7 21.3.3 16.9.1 15.7 0 15.3 0 12 0zm0 5.8a6.2 6.2 0 1 0 0 12.4A6.2 6.2 0 0 0 12 5.8zm0 10.2a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.4-11.8a1.44 1.44 0 1 0 0 2.88 1.44 1.44 0 0 0 0-2.88z" />
96                        </svg></a>
97                    <a href="https://www.linkedin.com/company/marvitel" target="_blank" aria-label="LinkedIn"
98                        style="color:#78A7A4;"><svg class="w-3 h-3 fill-current" viewBox="0 0 24 24">
99                            <path
100                                d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.13 1.45-2.13 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.07 2.07 0 1 1 0-4.14 2.07 2.07 0 0 1 0 4.14zM7.12 20.45H3.55V9h3.57v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45C23.21 24 24 23.23 24 22.28V1.72C24 .77 23.21 0 22.22 0z" />
101                        </svg></a>
102                </div>
103            </div>
104        </div>
105        <!-- Navbar -->
106        <nav id="navbar"
107            class="w-full bg-transparent px-6 md:px-12 lg:px-10 xl:px-20 2xl:px-32 py-4 flex items-center justify-between transition-all duration-300">
108            <div class="flex-1 flex justify-start">
109                <a href="../index.html" class="flex-shrink-0">
110                    <img src="../img/institucional/logo [email protected]" alt="Marvitel"
111                        class="h-3 md:h-4 lg:h-4 object-contain" id="nav-logo" />
112                </a>
113            </div>
114            <ul class="hidden lg:flex items-center gap-8 text-sm font-light text-rio-sergipe">
115                <li><a href="../index.html"
116                        class="hover:text-azul-tradicao transition-colors duration-200">Início</a></li>
117                <li class="group">
118                    <a href="#"
119                        class="py-6 -my-6 hover:text-azul-tradicao transition-colors duration-200 flex items-center gap-1 relative z-10">
120                        Soluções
121                        <svg class="w-2.5 h-2.5 transition-transform duration-300 group-hover:rotate-180" fill="none"
122                            stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
123                            <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
124                        </svg>
125                    </a>
126                    <div
127                        class="absolute left-0 top-full w-full opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-40 pointer-events-none group-hover:pointer-events-auto pt-2">
128                        <div
129                            class="bg-white/95 backdrop-blur-xl border-t border-mangue/20 shadow-2xl overflow-hidden pb-8 relative pointer-events-auto">
130                            <div class="max-w-[1400px] mx-auto px-6 md:px-12 lg:px-10 xl:px-20 2xl:px-32 pt-10 pb-6">
131                                <div class="grid grid-cols-12 gap-8 text-left">
132                                    <div
133                                        class="col-span-12 lg:col-span-4 space-y-4 pr-12 lg:border-r border-rio-sergipe/5">
134                                        <h2 class="text-2xl font-semibold text-rio-sergipe leading-tight">Soluções</h2>
135                                        <p class="text-sm text-rio-sergipe/60 leading-relaxed font-light">Conectividade
136                                            e tecnologia para empresas, provedores, eventos e condomínios, com
137                                            desempenho, estabilidade e soluções que se adaptam à sua necessidade.</p>
138                                        <a href="https://api.whatsapp.com/se
138nd?phone=558006068075&text=Ol%C3%A1!%20Venho%20atrav%C3%A9s%20do%20site%20da%20Marvitel%20e%20gostaria%20de%20saber%20mais%20sobre%20os%20servi%C3%A7os%20que%20voc%C3%AAs%20oferecem."
139                                            target="_blank"
140                                            class="inline-block bg-azul-tradicao text-white text-[10px] font-semibold px-6 py-2.5 rounded-lg hover:bg-rio-sergipe transition-all duration-300 shadow-lg shadow-azul-tradicao/20">Saiba
141                                            mais</a>
142                                    </div>
143                                    <div class="col-span-12 lg:col-span-8">
144                                        <div class="grid grid-cols-2 md:grid-cols-4 gap-6 text-left">
145                                            <div class="space-y-4">
146                                                <h3
147                                                    class="text-[9px] font-bold text-rio-sergipe uppercase tracking-[0.2em] mb-2">
148                                                    Conectividade</h3>
149                                                <ul class="space-y-3">
150                                                    <li><a href="link-dedicado.html"
151                                                            class="text-[13px] text-rio-sergipe hover:text-azul-tradicao transition-colors">Link
152                                                            Dedicado</a></li>
153                                                    <li><a href="banda-larga.html"
154                                                            class="text-[13px] text-rio-sergipe hover:text-azul-tradicao transition-colors">Banda
155                                                            Larga</a></li>
156                                                    <li><a href="hotspot.html"
157                                                            class="text-[13px] text-rio-sergipe hover:text-azul-tradicao transition-colors">Hotspot</a>
158                                                    </li>
159                                                    <li><a href="wifi-corporativo.html"
160                                                            class="text-[13px] text-rio-sergipe hover:text-azul-tradicao transition-colors">Wifi
161                                                            Corporativo</a></li>
162                                                    <li><a href="link-temporario-eventos.html"
163                                                            class="text-[13px] text-rio-sergipe hover:text-azul-tradicao transition-colors">Link
164                                                            Temporário para Eventos</a></li>
165                                                    <li><a href="vpn.html"
166                                                            class="text-[13px] text-rio-sergipe hover:text-azul-tradicao transition-colors">VPN</a>
167                                                    </li>
168                                                    <li><a href="mpls.html"
169                                                            class="text-[13px] text-rio-sergipe hover:text-azul-tradicao transition-colors">MPLS</a>
170                                                    </li>
171                                                </ul>
172                                            </div>
173                                            <div class="space-y-4">
174                                                <h3
175                                                    class="text-[9px] font-bold text-rio-sergipe uppercase tracking-[0.2em] mb-2">
176                                                    Telefonia</h3>
177                                                <ul class="space-y-3">
178                                                    <li><a href="troncos-sip.html"
179                                                            class="text-[13px] text-rio-sergipe hover:text-azul-tradicao transition-colors">Troncos
180                                                            SIP</a></li>
181                                                    <li><a href="pabx-ip-em-nuvem.html"
182                                                            class="text-[13px] text-rio-sergipe hover:text-azul-tradicao transition-colors">PABX
183                                                            IP em Nuvem</a></li>
184                                                    <li><a href="interfonia.html"
185                                                            class="text-[13px] text-rio-sergipe hover:text-azul-tradicao transition-colors">Interfonia</a>
186                                                    </li>
187                                                </ul>
188                                            </div>
189                                            <div class="space-y-4">
190                                                <h3
191                                                    class="text-[9px] font-bold text-rio-sergipe uppercase tracking-[0.2em] mb-2">
192                                                    Segurança e TI</h3>
193                                                <ul class="space-y-3">
194                                                    <li><a href="sistema-cftv.html"
195                                                            class="text-[13px] text-rio-sergipe hover:text-azul-tradicao transition-colors">Sistema
196                                                            de CFTV</a></li>
197                                                    <li><a href="anti-ddos.html"
198                                                            class="text-[13px] text-rio-sergipe hover:text-azul-tradicao transition-colors">Anti
199                                                            DDoS</a></li>
200                                                    <li><a href="cloud-computing.html"
201                                                            class="text-[13px] text-rio-sergipe hover:text-azul-tradicao transition-colors">Cloud
202                                                            Computing</a></li>
203                                                    <li><a href="dns-reverso-autoritativo.html"
204                                                            class="text-[13px] text-rio-sergipe hover:text-azul-tradicao transition-colors">DNS
205                                                            Reverso / Autoritativo</a></li>
206                                                    <li><a href="hospedagem.html"
207                                                            class="text-[13px] text-rio-sergipe hover:text-azul-tradicao transition-colors">Hospedagem</a>
208                                                    </li>
209                                                    <li><a href="colocation.html"
210                                                            class="text-[13px] text-rio-sergipe hover:text-azul-tradicao transition-colors">Colocation</a>
211                                                    </li>
212                                                    <li><a href="cloud-backup.html"
213                                                            class="text-[13px] text-rio-sergipe hover:text-azul-tradicao transition-colors">Cloud
214                                                            Backup</a></li>
215                                                </ul>
216                                            </div>
217                                            <div class="space-y-4">
218                                                <h3
219                                                    class="text-[9px] font-bold text-rio-sergipe uppercase tracking-[0.2em] mb-2">
220                                                    Infraestrutura de Rede</h3>
221                                                <ul class="space-y-3">
222                                                    <li><a href="cabeamento-estruturado.html"
223                                                            class="text-[13px] text-rio-sergipe hover:text-azul-tradicao transition-colors">Cabeamento
224                                                            Estruturado</a></li>
225                                                    <li><a href="redes-ftth.html"
226                                                            class="text-[13px] text-rio-sergipe hover:text-azul-tradicao transition-colors">Redes
227                                                            FTTh</a></li>
228                                                    <li><a href="certificacao-de-redes.html"
229                                                            class="text-[13px] text-rio-sergipe hover:text-azul-tradicao transition-colors">Certificação
230                                                            de Redes</a></li>
231                                                    <li><a href="projeto-de-redes.html"
232                                                            class="text-[13px] text-rio-sergipe hover:text-azul-tradicao transition-colors">Projeto
233                                                            de Redes</a></li>
234                                                </ul>
235                                            </div>
236                                        </div>
237                                    </div>
238                                </div>
239                            </div>
240                            <div class="max-w-[1400px] mx-auto px-6 md:px-12 lg:px-10 xl:px-20 2xl:px-32 pt-4">
241                                <div class="bg-rio-sergipe/5 py-3 px-8 rounded-xl flex justify-between items-center">
242                                    <p class="text-[10px] text-rio-sergipe/60 italic text-left">Não sabe qual solução é
243                                        a melhor para você? <a
244                                            href="https://api.whatsapp.com/se
244nd?phone=558006068075&text=Ol%C3%A1!%20Venho%20atrav%C3%A9s%20do%20site%20da%20Marvitel%20e%20gostaria%20de%20saber%20mais%20sobre%20os%20servi%C3%A7os%20que%20voc%C3%AAs%20oferecem."
245                                            target="_blank"
246                                            class="text-rio-sergipe/60 font-semibold underline decoration-rio-sergipe/30 underline-offset-4 hover:text-rio-sergipe/80 transition-colors font-sora">Entre
247                                            em contato conosco</a></p>
248                                </div>
249                            </div>
250                        </div>
251                    </div>
252                </li>
253                <li><a href="../sobre.html"
254                        class="hover:text-azul-tradicao transition-colors duration-200">Sobre</a>
255                </li>
256                <li><a href="../contato.html"
257                        class="hover:text-azul-tradicao transition-colors duration-200">Fale Conosco</a>
258                </li>
259                <li><a href="../marvitech.html"
260                        class="hover:text-azul-tradicao transition-colors duration-200">Marvitech</a></li>
261                <li><a href="../contratos.html"
262                        class="hover:text-azul-tradicao transition-colors duration-200">Contratos</a></li>
263
264                <!-- Dropdown Assine -->
265                <li class="group relative flex items-center">
266                    <a href="#"
267                        class="inline-flex items-center gap-1.5 px-5 py-1 rounded-full text-white bg-azul-tradicao hover:bg-[#158995] transition-colors duration-300 font-light text-xs border-none relative z-10"
268                        style="padding: 5px 20px;">
269                        Assine
270                        <svg class="w-2.5 h-2.5 transition-transform duration-300 group-hover:rotate-180" fill="none"
271                            stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
272                            <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
273                        </svg>
274                    </a>
275                    <div
276                        class="absolute left-1/2 -translate-x-1/2 top-full w-[280px] opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-40 pt-4 pointer-events-none group-hover:pointer-events-auto">
277                        <div
278                            class="bg-white/95 backdrop-blur-xl border-t border-mangue/20 shadow-2xl rounded-xl overflow-hidden p-6 text-left relative pointer-events-auto">
279                            <h3 class="text-[17px] font-semibold text-rio-sergipe mb-6 leading-tight">Faça parte dessa
280                                experiência.</h3>
281                            <div class="mb-5">
282                                <a href="https://marvitel.conecte.ai/" target="_blank"
283                                    class="flex items-center gap-3 text-[14px] text-rio-sergipe hover:text-azul-tradicao transition-colors font-medium">
284                                    <svg class="w-4 h-4 text-azul-tradicao shrink-0" fill="none" stroke="currentColor"
285                                        stroke-width="1.5" viewBox="0 0 24 24">
286                                        <path stroke-linecap="round" stroke-linejoin="round"
287                                            d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
288                                    </svg>
289                                    Assinar online
290                                </a>
291                            </div>
292                            <div class="mb-5">
293                                <h4 class="text-[10px] font-bold text-azul-tradicao uppercase tracking-widest mb-3">
294                                    WHATSAPP</h4>
295                                <a href="https://api.whatsapp.com/se
295nd?phone=558006068075&text=Ol%C3%A1!%20Venho%20atrav%C3%A9s%20do%20site%20da%20Marvitel%20e%20gostaria%20de%20saber%20mais%20sobre%20os%20servi%C3%A7os%20que%20voc%C3%AAs%20oferecem."
296                                    target="_blank"
297                                    class="flex items-center gap-3 text-[14px] text-rio-sergipe hover:text-azul-tradicao transition-colors font-medium">
298                                    <svg class="w-4 h-4 text-azul-tradicao shrink-0" fill="currentColor"
299                                        viewBox="0 0 24 24">
300                                        <path
301                                            d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8 12.8 0 00-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z" />
302                                        <path
303                                            d="M12.004 0C5.385 0 0 5.385 0 12.004c0 2.115.551 4.182 1.597 6.002L.037 23.963l6.096-1.597A11.968 11.968 0 0012.004 24c6.618 0 12-5.385 12-12.004C24 5.385 18.622 0 12.004 0zM12.004 22c-1.895 0-3.753-.51-5.383-1.476l-.386-.228-4 1.048 1.068-3.901-.25-.398A9.972 9.972 0 012.003 12c0-5.514 4.486-10 10.001-10 5.513 0 10 4.486 10 10S17.518 22 12.004 22z" />
304                                    </svg>
305                                    0800 606 8075
306                                </a>
307                            </div>
308                            <div class="border-t border-rio-sergipe/10 my-4"></div>
309                            <div class="mb-5">
310                                <h4 class="text-[10px] font-bold text-azul-tradicao uppercase tracking-widest mb-3">
311                                    LIGAMOS PARA VOCÊ</h4>
312                                <button type="button" onclick="openLeadModal()"
313                                    class="flex items-center gap-3 text-[14px] text-rio-sergipe hover:text-azul-tradicao transition-colors font-medium outline-none">
314                                    <svg class="w-4 h-4 text-azul-tradicao shrink-0" fill="none" stroke="currentColor"
315                                        stroke-width="1.5" viewBox="0 0 24 24">
316                                        <path stroke-linecap="round" stroke-linejoin="round"
317                                            d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
318                                    </svg>
319                                    Envie seus dados
320                                </button>
321                            </div>
322                            <div class="border-t border-rio-sergipe/10 my-4"></div>
323                            <div class="mb-2">
324                                <h4 class="text-[10px] font-bold text-azul-tradicao uppercase tracking-widest mb-3">
325                                    OUVIDORIA</h4>
326                                <a href="tel:08006068075"
327                                    class="flex items-center gap-3 text-[14px] text-rio-sergipe hover:text-azul-tradicao transition-colors font-medium mb-3">
328                                    <svg class="w-4 h-4 text-azul-tradicao shrink-0" fill="none" stroke="currentColor"
329                                        stroke-width="1.5" viewBox="0 0 24 24">
330                                        <path stroke-linecap="round" stroke-linejoin="round"
331                                            d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
332                                    </svg>
333                                    0800 606 8075
334                                </a>
335                                <a href="mailto:[email protected]"
336                                    class="flex items-center gap-3 text-[14px] text-rio-sergipe hover:text-azul-tradicao transition-colors font-medium">
337                                    <svg class="w-4 h-4 text-azul-tradicao shrink-0" fill="none" stroke="currentColor"
338                                        stroke-width="1.5" viewB
338ox="0 0 24 24">
339                                        <path stroke-linecap="round" stroke-linejoin="round"
340                                            d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
341                                    </svg>
342                                    [email protected]
343                                </a>
344                            </div>
345                        </div>
346                    </div>
347                </li>
348
349            </ul>
350            <div class="flex-1 flex justify-end items-center gap-3">
351                <a href="https://marvitel.conecte.ai/" target="_blank"
352                    class="inline-flex items-center gap-2 border-[0.9px] border-rio-sergipe/60 text-rio-sergipe text-xs font-thin px-5 py-1 rounded-full hover:border-azul-tradicao hover:text-azul-tradicao transition-all duration-300 whitespace-nowrap">
353                    <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="1.2" viewBox="0 0 24 24">
354                        <path stroke-linecap="round" stroke-linejoin="round"
355                            d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
356                    </svg>
357                    Área do Assinante
358                </a>
359                <button id="menu-btn" class="lg:hidden text-rio-sergipe focus:outline-none" aria-label="Abrir menu">
360                    <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
361                        <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
362                    </svg>
363                </button>
364            </div>
365        </nav>
366        <!-- Mobile Menu -->
367        <div id="mobile-menu" class="hidden lg:hidden bg-white/95 backdrop-blur-md text-rio-sergipe text-sm font-light">
368            <ul class="flex flex-col divide-y divide-rio-sergipe/10">
369                <li><a href="../index.html"
370                        class="block px-6 py-3 hover:text-azul-tradicao transition-colors">Início</a>
371                </li>
372                <li>
373                    <button onclick="document.getElementById('mobile-solutions-submenu').classList.toggle('hidden')"
374                        class="w-full flex items-center justify-between px-6 py-3 hover:text-azul-tradicao transition-colors focus:outline-none text-left">
375                        <span>Soluções</span>
376                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
377                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
378                        </svg>
379                    </button>
380                    <div id="mobile-solutions-submenu" class="hidden bg-rio-sergipe/5 px-8 py-4 space-y-6">
381                        <div class="text-left">
382                            <h4 class="text-[10px] font-bold text-rio-sergipe uppercase tracking-widest mb-3">
383                                Conectividade</h4>
384                            <ul class="space-y-3 opacity-70">
385                                <li><a href="link-dedicado.html" class="block hover:text-azul-tradicao">Link
386                                        Dedicado</a></li>
387                                <li><a href="banda-larga.html" class="block hover:text-azul-tradicao">Banda Larga</a>
388                                </li>
389                                <li><a href="hotspot.html" class="block hover:text-azul-tradicao">Hotspot</a></li>
390                                <li><a href="wifi-corporativo.html" class="block hover:text-azul-tradicao">Wifi
391                                        Corporativo</a></li>
392                                <li><a href="link-temporario-eventos.html" class="block hover:text-azul-tradicao">Link
393                                        Temporário para Eventos</a></li>
394                                <li><a href="vpn.html" class="block hover:text-azul-tradicao">VPN</a></li>
395                                <li><a href="mpls.html" class="block hover:text-azul-tradicao">MPLS</a></li>
396                            </ul>
397                        </div>
398                        <div class="text-left">
399                            <h4 class="text-[10px] font-bold text-rio-sergipe uppercase tracking-widest mb-3">Telefonia
400                            </h4>
401                            <ul class="space-y-3 opacity-70">
402                                <li><a href="troncos-sip.html" class="block hover:text-azul-tradicao">Troncos SIP</a>
403                                </li>
404                                <li><a href="pabx-ip-em-nuvem.html" class="block hover:text-azul-tradicao">PABX IP em
405                                        Nuvem</a></li>
406                                <li><a href="interfonia.html" class="block hover:text-azul-tradicao">Interfonia</a></li>
407                            </ul>
408                        </div>
409                        <div class="text-left">
410                            <h4 class="text-[10px] font-bold text-rio-sergipe uppercase tracking-widest mb-3">Segurança
411                                e TI</h4>
412                            <ul class="space-y-3 opacity-70">
413                                <li><a href="sistema-cftv.html" class="block hover:text-azul-tradicao">Sistema de
414                                        CFTV</a></li>
415                                <li><a href="anti-ddos.html" class="block hover:text-azul-tradicao">Anti DDoS</a></li>
416                                <li><a href="cloud-computing.html" class="block hover:text-azul-tradicao">Cloud
417                                        Computing</a></li>
418                                <li><a href="dns-reverso-autoritativo.html" class="block hover:text-azul-tradicao">DNS
419                                        Reverso / Autoritativo</a></li>
420                                <li><a href="hospedagem.html" class="block hover:text-azul-tradicao">Hospedagem</a></li>
421                                <li><a href="colocation.html" class="block hover:text-azul-tradicao">Colocation</a></li>
422                                <li><a href="cloud-backup.html" class="block hover:text-azul-tradicao">Cloud Backup</a>
423                                </li>
424                            </ul>
425                        </div>
426                        <div class="text-left">
427                            <h4 class="text-[10px] font-bold text-rio-sergipe uppercase tracking-widest mb-3">
428                                Infraestrutura de Rede</h4>
429                            <ul class="space-y-3 opacity-70">
430                                <li><a href="cabeamento-estruturado.html"
431                                        class="block hover:text-azul-tradicao">
431Cabeamento Estruturado</a></li>
432                                <li><a href="redes-ftth.html" class="block hover:text-azul-tradicao">Redes FTTh</a></li>
433                                <li><a href="certificacao-de-redes.html"
434                                        class="block hover:text-azul-tradicao">Certificação de Redes</a></li>
435                                <li><a href="projeto-de-redes.html" class="block hover:text-azul-tradicao">Projeto de
436                                        Redes</a></li>
437                            </ul>
438                        </div>
439                    </div>
440                </li>
441                <li><a href="../sobre.html"
442                        class="block px-6 py-3 hover:text-azul-tradicao transition-colors">Sobre</a></li>
443                <li><a href="../contato.html"
444                        class="block px-6 py-3 hover:text-azul-tradicao transition-colors">Fale Conosco</a></li>
445                <li><a href="../marvitech.html"
446                        class="block px-6 py-3 hover:text-azul-tradicao transition-colors">Marvitech</a></li>
447                <li><a href="../contratos.html"
448                        class="block px-6 py-3 hover:text-azul-tradicao transition-colors">Contratos</a></li>
449
450                <!-- Mobile Assine Submenu -->
451                <li>
452                    <button onclick="document.getElementById('mobile-assine-submenu').classList.toggle('hidden')"
453                        class="w-full flex items-center justify-between px-6 py-3 hover:text-azul-tradicao transition-colors focus:outline-none">
454                        <span>Assine</span>
455                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
456                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
457                        </svg>
458                    </button>
459                    <div id="mobile-assine-submenu" class="hidden bg-rio-sergipe/5 px-8 py-5 space-y-4">
460                        <div class="text-[13px] font-semibold text-azul-tradicao mb-2">Faça parte dessa experiência.
461                        </div>
462                        <a href="https://marvitel.conecte.ai/" target="_blank"
463                            class="flex items-center gap-3 py-1 text-rio-sergipe/80 hover:text-azul-tradicao transition-colors font-light">
464                            <svg class="w-4 h-4 text-azul-tradicao shrink-0" fill="none" stroke="currentColor"
465                                stroke-width="1.5" viewBox="0 0 24 24">
466                                <path stroke-linecap="round" stroke-linejoin="round"
467                                    d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
468                            </svg>
469                            Assinar online
470                        </a>
471                        <a href="https://api.whatsapp.com/send?phone=558006068075&text=Ol%C3%A1!%20Venho%20atrav%C3%A9s%20do%20site%20da%20Marvitel%20e%20gostaria%20de%20saber%20mais%20sobre%20os%20servi%C3%A7os%20que%20voc%C3%AAs%20oferecem."
472                            target="_blank"
473                            class="flex items-center gap-3 py-1 text-rio-sergipe/80 hover:text-azul-tradicao transition-colors font-light">
474                            <svg class="w-4 h-4 text-azul-tradicao shrink-0" fill="currentColor" viewBox="0 0 24 24">
475                                <path
476                                    d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8 12.8 0 00-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 
4760 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z" />
477                                <path
478                                    d="M12.004 0C5.385 0 0 5.385 0 12.004c0 2.115.551 4.182 1.597 6.002L.037 23.963l6.096-1.597A11.968 11.968 0 0012.004 24c6.618 0 12-5.385 12-12.004C24 5.385 18.622 0 12.004 0zM12.004 22c-1.895 0-3.753-.51-5.383-1.476l-.386-.228-4 1.048 1.068-3.901-.25-.398A9.972 9.972 0 012.003 12c0-5.514 4.486-10 10.001-10 5.513 0 10 4.486 10 10S17.518 22 12.004 22z" />
479                            </svg>
480                            WhatsApp: 0800 606 8075
481                        </a>
482                        <button onclick="openLeadModal()"
483                            class="w-full flex items-center gap-3 py-1 text-rio-sergipe/80 hover:text-azul-tradicao transition-colors font-light outline-none text-left">
484                            <svg class="w-4 h-4 text-azul-tradicao shrink-0" fill="none" stroke="currentColor"
485                                stroke-width="1.5" viewBox="0 0 24 24">
486                                <path stroke-linecap="round" stroke-linejoin="round"
487                                    d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
488                            </svg>
489                            Envie seus dados
490                        </button>
491                        <div class="border-t border-rio-sergipe/20 pt-4 space-y-2">
492                            <div class="text-[10px] font-bold text-azul-tradicao uppercase tracking-widest mb-2">
493                                Ouvidoria</div>
494                            <a href="tel:08006068075"
495                                class="flex items-center gap-3 text-[13px] text-rio-sergipe/60 hover:text-azul-tradicao transition-colors">
496                                <svg class="w-3.5 h-3.5 text-azul-tradicao shrink-0" fill="none" stroke="currentColor"
497                                    stroke-width="1.5" viewBox="0 0 24 24">
498                                    <path stroke-linecap="round" stroke-linejoin="round"
499                                        d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
500                                </svg>
501                                0800 606 8075
502                            </a>
503                            <a href="mailto:[email protected]"
504                                class="flex items-center gap-3 text-[13px] text-rio-sergipe/60 hover:text-azul-tradicao transition-colors">
505                                <svg class="w-3.5 h-3.5 text-azul-tradicao shrink-0" fill="none" stroke="currentColor"
506                                    stroke-width="1.5" viewBox="0 0 24 24">
507                                    <path stroke-linecap="round" stroke-linejoin="round"
508                                        d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
509                                </svg>
510                                [email protected]
511                            </a>
512                        </div>
513                    </div>
514                </li>
515
516                <li><a href="https://marvitel.conecte.ai/" target="_blank"
517                        class="block px-6 py-3 text-azul-tradicao">Área do Assinante</a></li>
518            </ul>
519        </div>
520    </header>
521
522    <main>
523        <!-- ══════════════════════════════════════════════
524         HERO SECTION: HOSPEDAGEM
525    ══════════════════════════════════════════════ -->
526        <section class="hospedagem-hero pt-32 pb-20 md:pt-60 md:pb-32">
527            <!-- Imagem de fundo com gradiente visível -->
528
529
530            <div
531                class="max-w-6xl mx-auto px-6 md:px-16 lg:px-20 hospedagem-hero-content w-full flex flex-col md:flex-row items-center justify-between gap-12">
532                <div class="max-w-2xl ">
533                    <span
534                        class="text-[10px] md:text-[11px] font-medium tracking-[0.2em] text-rio-sergipe/60 uppercase mb-3 block">
535                        Conectividade
536                    </span>
537                    <h1 class="text-4xl md:text-5xl lg:text-5xl font-semibold text-rio-sergipe mb-6 leading-tight">
538                        Link Dedicado
539                    </h1>
540                    <p class="text-sm md:text-base text-rio-sergipe/70 font-light leading-relaxed mb-10 max-w-lg">
541                        Conexão de internet exclusiva e de alta performance com garantia de 100% da banda contratada.
542                    </p>
543                    <a href="https://api.whatsapp.com/send?phone=558006068075&text=Ol%C3%A1!%20Venho%20atrav%C3%A9s%20do%20site%20da%20Marvitel%20e%20gostaria%20de%20saber%20mais%20sobre%20os%20servi%C3%A7os%20que%20voc%C3%AAs%20oferecem."
544                        target="_blank"
545                        class="inline-block bg-azul-tradicao text-white text-xs md:text-sm font-semibold px-10 py-3 rounded-lg hover:bg-rio-sergipe transition-all duration-300 shadow-xl shadow-azul-tradicao/30">
546                        Contrate
547                    </a>
548                </div>
549                <!-- O tamanho máximo dessa coluna estava travando a imagem. Agora você pode aumentar este 'max-width' abaixo (ex: 500px, 600px) para permitir que ela ocupe mais espaço. -->
550                <div class="hidden md:flex w-full items-center justify-end" style="max-width: 1000px;">
551                    <!-- Utilize este width para ditar o quanto ela preenche o limite acima -->
552                    <img src="../img/assets/img-servicos/LINK DEDICADO.png" alt="Link Dedicado"
553                        class="h-auto object-contain" style="width: 380px;">
554                </div>
555            </div>
556        </section>
557
558        <!-- ══════════════════════════════════════════════
559         CONTEÚDO DESCRITIVO
560    ══════════════════════════════════════════════ -->
561        <section class="bg-white py-16 md:py-24">
562            <div class="max-w-6xl mx-auto px-6 md:px-16 lg:px-20">
563                <div
564                    class="bg-background/50 rounded-3xl p-8 md:p-12 border border-azul-tradicao/10 flex flex-col md:flex-row items-center gap-10 md:gap-16 mb-20 md:mb-32 shadow-sm max-w-4xl">
565                    <!-- Novo Ícone: Servidor -->
566                    <div
567                        class="flex-shrink-0 w-20 h-20 bg-white rounded-2xl flex items-center justify-center text-azul-tradicao shadow-md border border-azul-tradicao/5">
568                        <svg width="40" height="40" fill="none" stroke="currentColor" stroke-width="1.2"
569                            viewBox="0 0 24 24">
570                            <path stroke-linecap="round" stroke-linejoin="round"
571                                d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
572                        </svg>
573                    </div>
574
575                    <!-- Texto informativo -->
576                    <div class="flex-1">
577                        <p
578                            class="text-sm md:text-base text-rio-sergipe/80 font-light leading-relaxed text-justify md:text-left">
579                            Com o nosso <strong class="text-azul-tradicao font-medium">Link Dedicado</strong>, sua
580                            empresa tem uma via exclusiva de conexão. Diferente da banda larga compartilhada, sua rede
581                            tem rota direta e alto desempenho.
582                        </p>
583                    </div>
584                </div>
585
586                <!-- ── Vantagens da Hospedagem ── -->
587                <div class="mb-20 md:mb-32">
588                    <h2 class="text-3xl md:text-4xl font-semibold text-rio-sergipe mb-12 text-center md:text-left">
589                        Vantagens:</h2>
590                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
591                        <!-- Vantagem 1 -->
592                        <div class="bg-background rounded-2xl py-14 px-8 border border-gray-100 flex flex-col h-full">
593                            <div
594                                class="w-12 h-12 bg-white rounded-xl flex items-center justify-center text-azul-tradicao mb-6 shadow-sm">
595                                <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5"
596                                    stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
597                                    <circle cx="12" cy="12" r="10" />
598                                    <polygon points="13 6 7 13 12 13 11 18 17 11 12 11 13 6" fill="currentColor" />
599                                </svg>
600                            </div>
601                            <h3 class="text-lg font-semibold text-rio-sergipe mb-4">Baixa Latência</h3>
602                            <p class="text-sm text-rio-sergipe/70 font-light leading-relaxed">
603                                Conexão estável e com resposta rápida, ideal para ambientes exigentes, chamadas em tempo
604                                real e aplicações em nuvem.
605                            </p>
606                        </div>
607
608                        <!-- Vantagem 2 -->
609                        <div class="bg-background rounded-2xl py-14 px-8  border border-gray-100 flex flex-col h-full">
610                            <div
611                                class="w-12 h-12 bg-white rounded-xl flex items-center justify-center text-azul-tradicao mb-6 shadow-sm">
612                                <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5"
613                                    viewBox="0 0 24 24">
614                                    <path stroke-linecap="round" stroke-linejoin="round"
615                                        d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
616                                </svg>
617                            </div>
618                            <h3 class="text-lg font-semibold text-rio-sergipe mb-4">100% de Garantia de Banda</h3>
619                            <p class="text-sm text-rio-sergipe/70 font-light leading-relaxed">
620                                Receba a velocidade exata contratada, sem oscilações em horários de pico.
621                            </p>
622                        </div>
623
624                        <!-- Vantagem 3 -->
625                        <div
626                            class="bg-background rounded-2xl py-14 px-8 border border-gray-100 flex flex-col h-full md:col-span-2 md:w-[calc(50%-1rem)] md:mx-auto lg:col-span-1 lg:w-full">
627                            <div
628                                class="w-12 h-12 bg-white rounded-xl flex items-center justify-center text-azul-tradicao mb-6 shadow-sm">
629                                <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5"
630                                    stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
631                                    <path
632                                        d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
633                                    <path d="M14.05 2a9 9 0 0 1 8 7.94" />
634                                    <path d="M14.05 6A5 5 0 0 1 18 10" />
635                                </svg>
636                            </div>
637                            <h3 class="text-lg font-semibold text-rio-sergipe mb-4">Suporte Proativo</h3>
638                            <p class="text-sm text-rio-sergipe/70 font-light leading-relaxed">
639                                Atendimento empresarial prioritário, 24 horas por dia, 7 dias por semana.
640                            </p>
641                        </div>
642                    </div>
643                </div>
644
645                <!-- ── Resumo Final e CTA ── -->
646                <div
647                    class="bg-rio-sergipe rounded-[2rem] p-10 md:p-16 text-center text-white relative overflow-hidden shadow-2xl">
648                    <!-- Elemento decorativo sutil -->
649                    <div class="absolute -top-24 -right-24 w-64 h-64 bg-azul-tradicao/10 rounded-full blur-3xl"></div>
650                    <div class="absolute -bottom-24 -left-24 w-64 h-64 bg-azul-tradicao/10 rounded-full blur-3xl"></div>
651
652                    <div class="relative z-10 max-w-3xl mx-auto">
653                        <p class="text-base font-light leading-relaxed mb-10">
654                            Para empresas e sistemas exigentes, o <strong class="text-mangue">Link Dedicado</strong> é
655                            fundamental.
656                        </p>
657
658                        <div class="flex flex-col items-center gap-3">
659                            <span class="text-sm uppercase tracking-widest text-mangue opacity-80">Fale com um
660                                consultor</span>
661                            <a href="tel:08006068075"
662                                class="text-2xl md:text-3xl font-bold hover:text-mangue transition-colors duration-300">
663                                0800 606 8075
664                            </a>
665                            <div class="mt-4 flex gap-4">
666                                <a href="https://api.whatsapp.com/send?phone=558006068075&text=Ol%C3%A1!%20Venho%20atrav%C3%A9s%20do%20site%20da%20Marvitel%20e%20gostaria%20de%20saber%20mais%20sobre%20os%20servi%C3%A7os%20que%20voc%C3%AAs%20oferecem."
667                                    target="_blank"
668                                    class="inline-flex items-center gap-2 bg-azul-tradicao px-8 py-3 rounded-lg font-semibold text-sm hover:scale-105 transition-transform shadow-lg">
669                                    <svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24">
670                                        <path
671                                            d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.
671198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L0 24l6.335-1.662c1.72.937 3.659 1.432 5.631 1.433h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413" />
672                                    </svg>
673                                    Atendimento via WhatsApp
674                                </a>
675                            </div>
676                        </div>
677                    </div>
678                </div>
679            </div>
680        </section>
681    </main>
682
683    <!-- ══════════════════════════════════════════════
684       FOOTER (herdado da index.html)
685  ══════════════════════════════════════════════ -->
686    <footer style="background-color:#e8f3f5;">
687        <div class="max-w-6xl mx-auto px-4 md:px-10 lg:px-16 pt-12 pb-8">
688            <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-8 md:gap-6">
689                <div>
690                    <div class="text-noite text-xs font-semibold mb-4 tracking-wide">Para sua empresa</div>
691                    <ul class="flex flex-col gap-2.5">
692                        <li><a href="link-dedicado.html"
693                                class="text-chao-batido text-[11px] hover:text-azul-tradicao transition-colors font-light">Internet
694                                Dedicada</a></li>
695                        <li><a href="banda-larga.html"
696                                class="text-chao-batido text-[11px] hover:text-azul-tradicao transition-colors font-light">Banda
697                                Larga</a></li>
698                        <li><a href="sistema-cftv.html"
699                                class="text-chao-batido text-[11px] hover:text-azul-tradicao transition-colors font-light">CFTV
700                                Inteligente</a></li>
701                        <li><a href="cloud-computing.html"
702                                class="text-chao-batido text-[11px] hover:text-azul-tradicao transition-colors font-light">Cloud
703                                Computing</a></li>
704                    </ul>
705                </div>
706                <div>
707                    <div class="text-noite text-xs font-semibold mb-4 tracking-wide">Para seu condomínio</div>
708                    <ul class="flex flex-col gap-2.5">
709                        <li><a href="../index.html#condominios"
710                                class="text-chao-batido text-[11px] hover:text-azul-tradicao transition-colors font-light">Planos</a>
711                        </li>
712                        <li><a href="interfonia.html"
713                                class="text-chao-batido text-[11px] hover:text-azul-tradicao transition-colors font-light">Interfonia</a>
714                        </li>
715                    </ul>
716                </div>
717                <div>
718                    <div class="text-noite text-xs font-semibold mb-4 tracking-wide">Para seu evento</div>
719                    <ul class="flex flex-col gap-2.5">
720                        <li><a href="link-temporario-eventos.html"
721                                class="text-chao-batido text-[11px] hover:text-azul-tradicao transition-colors font-light">Link
722                                Temporário</a></li>
723                        <li><a href="hotspot.html"
724                                class="text-chao-batido text-[11px] hover:text-azul-tradicao transition-colors font-light">Hotspot</a>
725                        </li>
726                    </ul>
727                </div>
728                <div>
729                    <div class="text-noite text-xs font-semibold mb-4 tracking-wide">Institucional</div>
730                    <ul class="flex flex-col gap-2.5">
731                        <li><a href="../sobre.html"
732                                class="text-chao-batido text-[11px] hover:text-azul-tradicao transition-colors font-light">Nossa
733                                história</a>
734                        </li>
735                        <li><a href="https://drive.google.com/drive/folders/1t_cE-ZeIk5UF4nndOMn2-QEHdc0KjTVW?usp=sharing"
736                                target="_blank"
737                                class="text-chao-batido text-[11px] hover:text-azul-tradicao transition-colors font-light">Portfólio</a>
738                        </li>
739                        <li><a href="../contato.html"
740                                class="text-chao-batido text-[11px] hover:text-azul-tradicao transition-colors font-light">Fale
741                                Conosco</a>
742                        </li>
743                    </ul>
744                </div>
745                <div>
746                    <div class="text-noite text-xs font-semibold mb-4 tracking-wide">Atendimento</div>
747                    <ul class="flex flex-col gap-2.5">
748                        <li><a href="tel:08006068075"
749                                class="text-chao-batido text-[11px] hover:text-azul-tradicao transition-colors font-light">0800
750                                606 8075</a></li>
751                        <li><a href="tel:08006068075"
752                                class="text-chao-batido text-[11px] hover:text-azul-tradicao transition-colors font-light">Ligar
753                                pra nós</a></li>
754                    </ul>
755                    <div class="mt-4">
756                        <div class="text-noite/70 text-[10px] font-semibold mb-1">Horário de funcionamento:</div>
757                        <div class="text-chao-batido text-[10px] font-light leading-relaxed">Suporte – 24
758                            horas<br>Administrativo – Seg à Sex 8h às 18h</div>
759                    </div>
760                </div>
761            </div>
762        </div>
763        <div class="border-t border-noite/15">
764            <div
765                class="max-w-6xl mx-auto px-4 md:px-10 lg:px-16 py-5 flex flex-col md:flex-row items-center justify-between gap-3">
766                <div class="flex flex-wrap items-center gap-4">
767                    <a href="../politica-privacidade.html"
768                        class="text-chao-batido text-[10px] hover:text-azul-tradicao transition-colors font-light">Política
769                        de Privacidade e Termos de Uso</a>
770                    <span class="text-noite/20 text-[10px]">|</span>
771                    <a href="../lgpd.html"
772                        class="text-chao-batido text-[10px] hover:text-azul-tradicao transition-colors font-light">LGPD</a>
773                    <span class="text-noite/20 text-[10px]">|</span>
774                    <a href="../contratos.html"
775                        class="text-chao-batido text-[10px] hover:text-azul-tradicao transition-colors font-light">Contratos</a>
776                </div>
777                <div class="flex items-center gap-1.5 text-chao-batido text-[10px] font-light">
778                    <svg width="11" height="11" fill="none" stroke="currentColor" stroke-width="1.5"
779                        viewBox="0 0 24 24">
780                        <path stroke-linecap="round" stroke-linejoin="round"
781                            d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
782                    </svg>
783                    <a href="mailto:[email protected]"
784                        class="hover:text-azul-tradicao transition-colors">[email protected]</a>
785                </div>
786            </div>
787        </div>
788        <div class="border-t border-noite/30" style="background-color: #474F54;">
789            <div
790                class="max-w-6xl mx-auto px-4 md:px-10 lg:px-16 py-12 flex flex-col md:flex-row items-center justify-between gap-4">
791                <img src="../img/institucional/logotipo negativo.png" alt="Marvitel" class="h-3 object-contain"
792                    onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
793                <span class="text-azul-tradicao text-sm font-semibold tracking-widest"
794                    style="display:none;">MARVITEL</span>
795                <p class="text-white text-[10px] font-light text-center">©2026 Marvitel – Todos os direitos reservados.
796                    CNPJ: 16.499.665/0001-21</p>
797                <div class="flex items-center gap-4">
798                    <a href="http://fb.com/marvitel.se" target="_blank" aria-label="Facebook" class="text-white"><svg
799                            class="w-3.5 h-3.5 fill-current" viewBox="0 0 24 24">
800                            <path
801                                d="M22 12A10 10 0 1 0 12 22v-7H9v-3h3V9.5C12 6.8 13.7 5 16.3 5c1.2 0 2.4.2 2.4.2v2.6h-1.4c-1.4 0-1.8.9-1.8 1.8V12h3.1l-.5 3H15.5v7A10 10 0 0 0 22 12z" />
802                        </svg></a>
803                    <a href="https://www.instagram.com/marvitel.se/" target="_blank" aria-label="Instagram"
804                        class="text-white"><svg class="w-3.5 h-3.5 fill-current" viewBox="0 0 24 24">
805                            <path
806                                d="M12 2.2c3.2 0 3.6 0 4.9.1 3.3.1 4.8 1.7 4.9 4.9.1 1.3.1 1.6.1 4.8s0 3.6-.1 4.8c-.1 3.2-1.6 4.8-4.9 4.9-1.3.1-1.6.1-4.9.1s-3.6 0-4.8-.1C3.7 21.6 2.2 20 2.1 16.8 2 15.6 2 15.2 2 12s0-3.6.1-4.8C2.2 3.9 3.8 2.3 7.2 2.2c1.2-.1 1.6-.1 4.8-.1zm0-2.2C8.7 0 8.3 0 7.1.1 2.7.3.3 2.7.1 7.1 0 8.3 0 8.7 0 12s0 3.7.1 4.9c.2 4.4 2.6 6.8 7 7C8.3 24 8.7 24 12 24s3.7 0 4.9-.1c4.4-.2 6.8-2.6 7-7 .1-1.2.1-1.6.1-4.9s0-3.7-.1-4.9C23.7 2.7 21.3.3 16.9.1 15.7 0 15.3 0 12 0zm0 5.8a6.2 6.2 0 1 0 0 12.4A6.2 6.2 0 0 0 12 5.8zm0 10.2a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.4-11.8a1.44 1.44 0 1 0 0 2.88 1.44 1.44 0 0 0 0-2.88z" />
807                        </svg></a>
808                    <a href="https://www.youtube.com/@marvitel-se" target="_blank" aria-label="YouTube"
809                        class="text-white"><svg class="w-3.5 h-3.5 fill-current" viewBox="0 0 24 24">
810                            <path
811                                d="M23.495 6.205a3.007 3.007 0 00-2.088-2.088c-1.87-.501-9.396-.501-9.396-.501s-7.507-.01-9.396.501A3.007 3.007 0 00.527 6.205a31.247 31.247 0 00-.522 5.805 31.247 31.247 0 00.522 5.783 3.007 3.007 0 002.088 2.088c1.868.502 9.396.502 9.396.502s7.506 0 9.396-.502a3.007 3.007 0 002.088-2.088 31.247 31.247 0 00.5-5.783 31.247 31.247 0 00-.5-5.805zM9.609 15.601V8.408l6.264 3.602z" />
812                        </svg></a>
813                    <a href="https://www.linkedin.com/company/marvitel" target="_blank" aria-label="LinkedIn"
814                        class="text-white"><svg class="w-3.5 h-3.5 fill-current" viewBox="0 0 24 24">
815                            <path
816                                d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.13 1.45-2.13 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.07 2.07 0 1 1 0-4.14 2.07 2.07 0 0 1 0 4.14zM7.12 20.45H3.55V9h3.57v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45C23.21 24 24 23.23 24 22.28V1.72C24 .77 23.21 0 22.22 0z" />
817                        </svg></a>
818                </div>
819            </div>
820        </div>
821    </footer>
822
823    <!-- ── Back to Top Button ── -->
824    <button id="back-to-top" aria-label="Voltar ao topo"
825        class="fixed bottom-6 right-6 w-10 h-10 bg-azul-tradicao text-white rounded-full flex items-center justify-center opacity-0 transition-opacity duration-300 z-[100]">
826        <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" viewB
826ox="0 0 24 24">
827            <path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7" />
828        </svg>
829    </button>
830
831    
831<script src="../script.js"></script>
831
832    
832<script>
833        // Ajuste da navbar ao scroll para esta página específica (se necessário)
834        window.addEventListener('scroll', () => {
835            const nav = document.getElementById('navbar');
836            const logo = document.getElementById('nav-logo');
837            const backToTop = document.getElementById('back-to-top');
838
839            if (window.scrollY > 50) {
840                nav.classList.add('bg-white/95', 'backdrop-blur-md', 'shadow-sm');
841                nav.classList.remove('bg-transparent');
842                nav.querySelectorAll('a, button').forEach(el => el.classList.add('text-rio-sergipe'));
843                backToTop.style.opacity = '1';
844            } else {
845                nav.classList.remove('bg-white/95', 'backdrop-blur-md', 'shadow-sm');
846                nav.classList.add('bg-transparent');
847                backToTop.style.opacity = '0';
848            }
849        });
850
851        // Mobile menu toggle
852        const menuBtn = document.getElementById('menu-btn');
853        const mobileMenu = document.getElementById('mobile-menu');
854        if (menuBtn && mobileMenu) {
855            menuBtn.addEventListener('click', () => {
856                mobileMenu.classList.toggle('hidden');
857            });
858        }
859    </script>
859
860
861    <!-- Motion One JS e Inicialização Dinâmica -->
862    
862<script type="module">
863        import { animate, inView, stagger, spring } from "https://cdn.jsdelivr.net/npm/[email protected]/+esm";
864
865        document.addEventListener('DOMContentLoaded', () => {
866            // 1. Ampliando o radar para capturar Badges, Botões, Imagens e todos os textos do site
867            const selectors = [
868                '#main-content h1', '#main-content h2', '#main-content h3', '#main-content h4',
869                '#main-content p', '#main-content ul:not(.faq-list)',
870                '#main-content img:not(.logo-item)', // remove apenas logos iterativas. Patterns poderão ser animados suavemente também!
871                '#main-content a.inline-flex', '#main-content button', '#main-content a.btn',
872                '#main-content .badge', '#main-content span.text-sm.font-semibold',
873                '.svc-card', '.plan-card', '.beneficio-card', '.faq-item'
874            ];
875
876            document.querySelectorAll(selectors.join(', ')).forEach((el) => {
877                // Ignora navbar, rodapé explícito e elementos escondidos
878                if (el.closest('header') || el.closest('footer') || el.closest('#navbar') || window.getComputedStyle(el).display === 'none') return;
879
880                // Evita piscar/duplicar elementos internos de Cards (se o próprio card já vai animar subir, o parágrafo/ícone dentro dele não recebe animação isolada)
881                const parentCard = el.closest('.svc-card, .plan-card, .beneficio-card, .faq-item, .hero-slide');
882                if (parentCard && el !== parentCard && !el.closest('.hero-slide')) return;
883
884                // Salvar a opacidade original projetada pelo layout (ex: opacity-20 sendo 0.2)
885                // Isso impede que a Engine force opacidade para 1 em 100% dos elementos cegamente.
886                el.dataset.targetOpacity = window.getComputedStyle(el).op
886acity || "1";
887
888                if (el.tagName === 'H1' || el.tagName === 'H2') {
889                    // Quebrador de palavras seguro para H1/H2
890                    const wrapWords = (node) => {
891                        if (node.nodeType === Node.TEXT_NODE) {
892                            const words = node.textContent.split(/(\s+)/);
893                            if (words.length <= 1 && node.textContent.trim() === '') return;
894
895                            const fragment = document.createDocumentFragment();
896                            words.forEach(word => {
897                                if (word.trim() === '') {
898                                    fragment.appendChild(document.createTextNode(word));
899                                } else {
900                                    const span = document.createElement('span');
901                                    span.style.display = 'inline-block';
902                                    span.style.opacity = '0';
903                                    span.style.transform = 'translateY(10px)'; // Flutuar leve por palavra
904                                    span.style.willChange = 'transform, opacity';
905                                    span.className = 'fstr-word';
906                                    span.textContent = word;
907                                    fragment.appendChild(span);
908                                }
909                            });
910                            node.parentNode.replaceChild(fragment, node);
911                        } else if (node.nodeType === Node.ELEMENT_NODE) {
912                            if (node.tagName !== 'BR') {
913                                Array.from(node.childNodes).forEach(wrapWords);
914                            }
915                        }
916                    };
917                    Array.from(el.childNodes).forEach(wrapWords);
918                    el.dataset.motionGroup = 'heading-stagger';
919                } else {
920                    // Offset de 50px para Badges, Botões e Imagens subirem fluidamente
921                    el.style.opacity = "0";
922                    el.style.transform = 'translateY(50px)';
923                    el.style.willChange = 'transform, opacity';
924                    el.dataset.motionGroup = 'generic-up';
925                }
926            });
927
928            // Threshold: O elemento só começa a animar quando passar 50px para dentro da tela de baixo para cima
929            const viewOptions = { margin: "0px 0px -50px 0px" };
930
931            // Curva de Bezier para "Começar Rápido e Terminar Lento" (Ease Out Expo)
932            const fastStartSlowEnd = [0.16, 1, 0.3, 1];
933
934            // 2. Animar Títulos H1 e H2 palavra por palavra (Efeito Stagger by Word)
935            document.querySelectorAll('[data-motion-group="heading-stagger"]').forEach(heading => {
936                inView(heading, () => {
937                    const spans = heading.querySelectorAll('.fstr-word');
938                    animate(spans, { opacity: parseFloat(heading.dataset.targetOpacity || "1"), transform: "none" }, { delay: stagger(0.08), duration: 1.2, easing: fastStartSlowEnd });
939                }, viewOptions);
940            });
941
942            // 3. Animar Elementos em Grupo (Stagger/Escadinha para Cards)
943            const staggerContainers = ['.svc-track', '.grid', '.faq-list', '.plan-carousel-track', '.beneficios-grid'];
944            staggerContainers.forEach(containerSelector => {
945                inView(containerSelector, ({ target }) => {
946                    const elements = target.querySelectorAll('[data-motion-group="generic-up"]');
947                    if (elements.length > 0) {
948                        animate(elements,
949                            { opacity: 1, transform: "none" }, // cards assumem opacidade 1 normal
950                            { delay: stagger(0.12), duration: 1.2, easing: fastStartSlowEnd }
951                        );
952                        // Clean up data attributes
953                        elements.forEach(el => delete el.dataset.motionGroup);
954                    }
955                }, viewOptions);
956            });
957
958            // 4. Parágrafos, Imagens, Botões e Badges que sobem suavemente de forma independente
959            document.querySelectorAll('[data-motion-group="generic-up"]').forEach(target => {
960                inView(target, () => {
961                    if (target.dataset.motionGroup === "generic-up") {
962                        // Aqui a mágica que respeita o opacity-20 de imagens pattern!
963                        const destOpacity = parseFloat(target.dataset.targetOpacity || "1");
964                        animate(target, { opacity: destOpacity, transform: "none" }, { duration: 1.2, easing: fastStartSlowEnd });
965                        delete target.dataset.motionGroup;
966                    }
967                }, viewOptions);
968            });
969
970        });
971    </script>
971
972    <!-- Assine Modal (Ligamos para você) -->
973    <div id="leadModal"
974        class="fixed inset-0 z-[100] flex items-center justify-center bg-noite/60 backdrop-blur-sm opacity-0 invisible transition-all duration-300">
975        <div class="bg-white rounded-2xl w-[90%] max-w-sm p-6 lg:p-8 relative shadow-2xl scale-95 transition-transform duration-300"
976            id="leadModalContent">
977            <button onclick="closeLeadModal()"
978                class="absolute top-4 right-4 text-gray-400 hover:text-rio-sergipe transition-colors outline-none cursor-pointer">
979                <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
980                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
981                </svg>
982            </button>
983            <!-- Form view -->
984            <div id="leadFormView">
985                <h3 class="text-xl font-bold text-rio-sergipe mb-2">Ligamos para você</h3>
986                <p class="text-[13px] text-gray-500 mb-5 leading-relaxed">Deixe seus dados e nossa equipe entrará em
987                    contato o mais breve possível.</p>
988                <form id="leadForm" class="space-y-4" novalidate>
989                    <!-- Honeypot anti-bot -->
990                    <input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off">
991                    <div>
992                        <label for="leadName" class="block text-xs font-semibold text-rio-sergipe mb-1">Nome</label>
993                        <input type="text" id="leadName" name="nome" required
994                            class="w-full border border-gray-200 rounded-lg px-4 py-2.5 text-sm outline-none focus:border-azul-tradicao transition-colors"
995                            placeholder="Seu nome completo">
996                    </div>
997                    <div>
998                        <label for="leadPhone" class="block text-xs font-semibold text-rio-sergipe mb-1">Telefone /
999                            WhatsApp</label>
1000                        <input type="tel" id="leadPhone" name="telefone" required
1001                            class="w-full border border-gray-200 rounded-lg px-4 py-2.5 text-sm outline-none focus:border-azul-tradicao transition-colors"
1002                            placeholder="(00) 00000-0000">
1003                    </div>
1004                    <!-- reCAPTCHA v2 inline -->
1005                    <div class="flex justify-center pt-1">
1006                        <div class="g-recaptcha" data-sitekey="6Ldg2q4sAAAAAJmKAIOhJLRAoYnH4IP7tcGr7OIZ"></div>
1007                    </div>
1008                    <p id="leadCaptchaError" class="hidden text-xs text-red-500 text-center -mt-1">Por favor, confirme
1009                        que você não é um robô.</p>
1010                    <button type="submit" id="leadSubmitBtn"
1011                        class="w-full bg-azul-tradicao hover:bg-rio-sergipe text-white font-medium py-3 rounded-lg transition-colors mt-1 text-sm cursor-pointer flex items-center justify-center gap-2">
1012                        Enviar meus dados
1013                    </button>
1014                </form>
1015                <p id="leadFormError" class="hidden mt-3 text-xs text-red-500 text-center">Algo deu errado. Tente
1016                    novamente.</p>
1017            </div>
1018            <!-- Thank-you view -->
1019            <div id="leadThanksView" class="hidden text-center py-4">
1020                <div class="w-14 h-14 bg-azul-tradicao/10 rounded-full flex items-center justify-center mx-auto mb-4">
1021                    <svg class="w-7 h-7 text-azul-tradicao" fill="none" stroke="currentColor" stroke-width="2"
1022                        viewBox="0 0 24 24">
1023                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
1024                    </svg>
1025                </div>
1026                <h3 class="text-xl font-bold text-rio-sergipe mb-2">Mensagem enviada!</h3>
1027                <p class="text-[13px] text-gray-500 leading-relaxed mb-6">Obrigado pelo contato! Nossa equipe entrará em
1028                    contato com você em breve.</p>
1029                <button onclick="closeLeadModal()"
1030                    class="bg-azul-tradicao hover:bg-rio-sergipe text-white font-medium py-2.5 px-8 rounded-lg transition-colors text-sm cursor-pointer">
1031                    Fechar
1032                </button>
1033            </div>
1034        </div>
1035    </div>
1036    </div>
1037
1038    
1038<script>
1039        function openLeadModal() {
1040            const modal = document.getElementById('leadModal');
1041            const content = document.getElementById('leadModalContent');
1042            const formView = document.getElementById('leadFormView');
1043            const thanksView = document.getElementById('leadThanksView');
1044            if (modal && content) {
1045                if (formView) formView.classList.remove('hidden');
1046                if (thanksView) thanksView.classList.add('hidden');
1047                const errEl = document.getElementById('leadFormError');
1048                if (errEl) errEl.classList.add('hidden');
1049                const capErr = document.getElementById('leadCaptchaError');
1050                if (capErr) capErr.classList.add('hidden');
1051                modal.classList.remove('opacity-0', 'invisible');
1052                modal.classList.add('opacity-100', 'visible');
1053                content.classList.remove('scale-95');
1054                content.classList.add('scale-100');
1055            }
1056        }
1057        function closeLeadModal() {
1058            const modal = document.getElementById('leadModal');
1059            const content = document.getElementById('leadModalContent');
1060            if (modal && content) {
1061                modal.classList.remove('opacity-100', 'visible');
1062                modal.classList.add('opacity-0', 'invisible');
1063                content.classList.remove('scale-100');
1064                content.classList.add('scale-95');
1065            }
1066        }
1067        document.getElementById('leadModal').addEventListener('click', function (e) {
1068            if (e.target === this) closeLeadModal();
1069        });
1070        document.getElementById('leadForm').addEventListener('submit', async function (e) {
1071            e.preventDefault();
1072            const btn = document.getElementById('leadSubmitBtn');
1073            const errEl = document.getElementById('leadFormError');
1074            const capErr = document.getElementById('leadCaptchaError');
1075            errEl.classList.add('hidden');
1076            capErr.classList.add('hidden');
1077
1078            // Validate reCAPTCHA
1079            const captchaResponse = typeof grecaptcha !== 'undefined' ? grecaptcha.getResponse() : null;
1080            if (!captchaResponse) {
1081                capErr.classList.remove('hidden');
1082                return;
1083            }
1084
1085            // Loading state
1086            btn.disabled = true;
1087            btn.innerHTML = '<svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"></path></svg> Enviando...';
1088
1089            const formData = new FormData(this);
1090            formData.append('g-recaptcha-response', captchaResponse);
1091
1092            try {
1093                const res = await fetch('https://formspree.io/f/mpqoeoan', {
1094                    method: 'POST',
1095                    headers: { 'Accept': 'application/json' },
1096                    body: formData
1097                });
1098                const data = await res.json();
1099                if (res.ok) {
1100                    document.getElementById('leadFormView').classList.add('hidden');
1101                    document.getElementById('leadThanksView').classList.remove('hidden');
1102                    document.getElementById('leadForm').reset();
1103                    if (typeof grecaptcha !== 'undefined') grecaptcha.reset();
1104                } else {
1105                    throw new Error(data.error || 'Erro ao enviar');
1106                }
1107            } catch (err) {
1108                errEl.classList.remove('hidden');
1109                if (typeof grecaptcha !== 'undefined') grecaptcha.reset();
1110            } finally {
1111                btn.disabled = false;
1112                btn.innerHTML = 'Enviar meus dados';
1113            }
1114        });
1115    </script>
1115
1116</body>
1117
1118</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.