PageSourceSearch

https://marvitel.com.br/viabilidade/

html marvitel.com.br collected 2026-10-08 12:28:40 UTC 66,804 bytes, 1,340 lines download raw bytes

1<!DOCTYPE html>
2<html lang="pt-BR">
3<head>
4    <meta charset="UTF-8">
5    <base href="/viabilidade/">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <meta name="description" content="Consulte a viabilidade de instalação de internet fibra óptica Marvitel no seu endereço.">
8    <title>Marvitel - Assine</title>
9    <link rel="preconnect" href="https://fonts.googleapis.com">
10    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11        <link href="https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
12            <link rel="icon" href="uploads/favicon_1776358015.png">
13        <link rel="stylesheet" href="assets/css/style.css?v=1791462520">
14    <style>
15        :root {
16            --font: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
17            --primary: #1da5b3;
18            --primary-light: #1da5b3;
19            --primary-dark: #1da5b3;
20            --primary-glow: #1da5b34d;
21            --accent: #1da5b3;
22            --accent-dark: #1da5b3;
23            --bg-dark: #1f2223;
24            --bg-start: #000000;
25            --bg-end: #1f2223;
26            --header-bg: #1da5b3;
27            --text-primary: #ffffff;
28            --text-secondary: #c9c9c9;
29            --gradient-hero: linear-gradient(135deg, #000000 0%, #1da5b3 50%, #1f2223 100%);
30            --gradient-primary: linear-gradient(135deg, #1da5b3, #1da5b3);
31            --gradient-accent: linear-gradient(135deg, #1da5b3, #1da5b3dd);
32            --form-input-bg: #045163;
33            --form-input-border: #045163;
34            --form-select-border: #045163;
35            --form-btn-border: #262b2d;
36            --form-label: #c9c9c9;
37            --form-section-bg: #045163;
38            --card-bg-opacity: 1;
39            --card-border-opacity: 0;
40            --card-blur: 30px;
41            --plancard-bg-opacity: 1;
42            --plancard-border-opacity: 0;
43            --plancard-speed-color: #045163;
44            --plancard-speed-color2: #045163;
45            --plancard-speed-size: 24px;
46            
47            --plancard-speed-weight: 800;
48            --plancard-speed-style: normal;
49            --plancard-speed-decoration: none;
50            --plancard-name-color: #045163;
51            --plancard-name-color2: #045163;
52            --plancard-name-size: 18px;
53            
54            --plancard-name-weight: normal;
55            --plancard-name-style: normal;
56            --plancard-name-decoration: none;
57            --plancard-price-color: #045163;
58            --plancard-price-color2: #045163;
59            --plancard-price-size: 32px;
60            
61            --plancard-price-weight: 800;
62            --plancard-price-style: normal;
63            --plancard-price-decoration: none;
64            --plancard-period-color: #262b2d;
65            --plancard-period-color2: #262b2d;
66            --plancard-period-size: 13px;
67            
68            --plancard-period-weight: normal;
69            --plancard-period-style: normal;
70            --plancard-period-decoration: none;
71            --plancard-features-color: #262b2d;
72            --plancard-features-color2: #262b2d;
73            --plancard-features-size: 14px;
74            
75            --plancard-features-weight: normal;
76            --plancard-features-style: normal;
77            --plancard-features-decoration: none;
78            --plancard-btn-bg: #045163;
79            --plancard-btn-color: #ffffff;
80            --plancard-btn-color2: #ffffff;
81            --plancard-btn-size: 14px;
82            
83            --plancard-btn-weight: 700;
84            --plancard-btn-style: normal;
85            --plancard-btn-decoration: none;
86                        --planpop-speed-color: #045163;
87            --planpop-speed-color2: #045163;
88            
89            
90            --planpop-speed-weight: 700;
91            --planpop-speed-style: normal;
92            --planpop-speed-decoration: none;
93                        --planpop-name-color: #045163;
94            --planpop-name-color2: #045163;
95            
96            
97            --planpop-name-weight: normal;
98            --planpop-name-style: normal;
99            --planpop-name-decoration: none;
100                        --planpop-price-color: #045163;
101            --planpop-price-color2: #045163;
102            
103            
104            --planpop-price-weight: 700;
105            --planpop-price-style: normal;
106            --planpop-price-decoration: none;
107                        --planpop-period-color: #262b2d;
108            --planpop-period-color2: #262b2d;
109            
110            
111            --planpop-period-weight: normal;
112            --planpop-period-style: normal;
113            --planpop-period-decoration: none;
114                        --planpop-features-color: #262b2d;
115            --planpop-features-color2: #262b2d;
116            
117            
118            --planpop-features-weight: normal;
119            --planpop-features-style: normal;
120            --planpop-features-decoration: none;
121                        --planpop-btn-color: #262b2d;
122            --planpop-btn-color2: #262b2d;
123            
124            
125            --planpop-btn-weight: 700;
126            --planpop-btn-style: normal;
127            --planpop-btn-decoration: none;
128                        --planpop-btn-bg: #1da5b3;
129            --planpop-bg-opacity: 1;
130                    }
131        .header { background: #1da5b3d9; backdrop-filter: blur(20px); }
132        .header.scrolled { background: #1da5b3f2; }
133        .hero-bg { background: var(--gradient-hero); }
134        .hero-wave { background: var(--bg-dark); }
135                body { background: none; }
136        html { background: #1f2223; }
137        body::before {
138            content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
139            background: url('uploads/bg_1776438405.png') no-repeat center center;
140            background-size: cover; z-index: -2;
141        }
142        body::after {
143            content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
144                        background: linear-gradient(135deg, #00000000 0%, #1da5b300 40%, #1f22230d 100%);
145            z-index: -1;
146        }
147        .hero { background: transparent !important; }
148        .hero-bg { background: transparent; }
149        .main { background: transparent !important; }
150                @media (max-width: 768px) and (min-width: 481px) { body::before { background-image: url('uploads/bg_tablet_1776877327.png') !important; } }
151                        @media (max-width: 480px) { body::before { background-image: url('uploads/bg_mobile_1776877327.png') !important; } }
152                        header,.header,nav{background:transparent!important;border:none!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
153        #backToTopBtn{width:48px!important;height:48px!important;background:#1aa0af!important;color:#ffffff!important;right:20px;left:auto;}
154        html,body{-ms-overflow-style:none!important;scrollbar-width:none!important;}html::-webkit-scrollbar,body::-webkit-scrollbar{display:none!important;}
155        .hero-subtitle{color:#c9c9c9!important;}
156        .form-select{background-color:#f5f5f5!important;}
157        .form-select{color:#262b2d!important;}
158        #btnSelectCategory{color:#ffffff!important;}
159        .plan-popular-badge{background:#00897b!important;opacity:1!important;}
160        .plan-popular-badge{color:#ffffff!important;}
161        .plan-card.popular{background:#c5f3f9!important;}
162        .plan-card{border-color:#262b2d!important;}
163        .plan-loyalty,#plansTitle,#addressTitle,#viabilityLoading span,.plans-section-title,#regSummarySpeed,#regSummaryName,.reg-summary-badge,#regSummaryPrice{color:#ffffff!important;}
164        .plan-loyalty{color:#262b2d!important;}
165        .plans-section-title,#plansTitle{color:#262b2d!important;}
166        .plan-tabs{background:#f3f4f5!important;border:none!important;}
167        .plan-tab{color:#262b2d!important;}
168        .btn-back{background:#00897b!important;border:none!important;}
169        .btn-back{color:#ffffff!important;}
170        .reg-section{background:#ffffff!important;}
171        .reg-section-header{background:#ffffff!important;}
172        .reg-section-body{background:#ffffff!important;}
173        .reg-section-header,.reg-section-header h3,.reg-section-body{color:#262b2d!important;}
174        .reg-section-header svg{stroke:#262b2d!important;}
175        .reg-section-header{border-bottom:1px solid #e6e7e8!important;}
176        .address-display-compact{background:#ffffff!important;border:none!important;}
177        .badge-speed{color:#00897b!important;}
178        .upload-box{background:#f5f6f7!important;}
179        .upload-box{border-color:#d1d5db!important;}
180        .upload-title,.upload-hint{color:#262b2d!important;}
181        .pessoa-toggle-label{background:#f5f6f7!important;}
182        .pessoa-toggle-label{color:#262b2d!important;}
183        .pessoa-toggle-option input:checked+.pessoa-toggle-label{background:#00897b!important;border-color:#00897b!important;}
184        .pessoa-toggle-option input:checked+.pessoa-toggle-label{color:#ffffff!important;}
185        .sched-day{background:#f5f6f7!important;}
186        .sched-day{color:#262b2d!important;}
187        .sched-day.selected{background:#00897b!important;border:none!important;box-shadow:none!important;}
188        .sched-day.selected{color:#ffffff!important;}
189        .sched-day.blocked{background:#eeeeee!important;}
190        .shift-box{background:#f5f6f7!important;}
191        .shift-box{color:#262b2d!important;}
192        .shift-option input:checked+.shift-box{background:#00897b!important;border-color:#00897b!important;box-shadow:none!important;}
193        .shift-option input:checked+.shift-box{color:#ffffff!important;}
194        .reg-terms-link{color:#00897b!important;}
195        .reg-total-summary{background:#f5f6f7!important;}
196        .reg-total-summary{border-color:#e6e7e8!important;}
197        #termsModal .modal-content{background:#ffffff!important;}
198        #termsModal .modal-content,#termsModal h2,#termsScrollArea,#termsScrollArea *{color:#262b2d!important;}
199        #termsModal .modal-content{border-color:#e6e7e8!important;}
200        .btn-submit-registration{background:#00897b!important;}
201        .btn-submit-registration{color:#ffffff!important;}
202        .plans-grid-inner{display:grid;grid-template-columns:repeat(auto-fit, minmax(130px, 300px))!important;gap:6px!important;justify-content:center!important;justify-items:stretch!important;}
203        @media(min-width:769px){.plans-grid-inner.cards-1{grid-template-columns:repeat(1,minmax(130px,300px))!important;justify-content:center!important;}.plans-grid-inner.cards-2{grid-template-columns:repeat(2,minmax(130px,300px))!important;justify-content:center!important;}.plans-grid-inner.cards-3{grid-template-columns:repeat(3,minmax(130px,300px))!important;justify-content:center!important;}}
204        .plan-card{max-width:300px!important;width:100%!important;margin-inline:auto!important;}
205        @media(max-width:768px){.plans-grid-inner{grid-template-columns:repeat(auto-fit, minmax(130px, 300px))!important;}}
206        @media(max-width:480px){.plans-grid-inner{display:flex!important;grid-template-columns:none!important;gap:6px!important;justify-content:flex-start!important;align-items:stretch;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:12px 0 10px;scroll-padding-inline:0;}.plans-grid-inner::-webkit-scrollbar{display:none;}.plans-grid-inner{scrollbar-width:none;-ms-overflow-style:none;}.plan-card{flex:0 0 100%!important;max-width:100%!important;width:100%!important;scroll-snap-align:start;}.plan-card.popular{order:-1!important;}}
207                        /* CSS Personalizado */
208        /* ===== HEADER / NAVBAR: remover fundo, bordas e efeitos ===== */
209header, .header, nav {
210    background: transparent !important;           /* remove qualquer cor de fundo */
211    border: none !important;                      /* remove bordas visíveis */
212    box-shadow: none !important;                  /* remove sombras */
213    backdrop-filter: none !important;             /* remove efeito de blur (glass) */
214    -webkit-backdrop-filter: none !important;
214     /* compatibilidade com Safari */
215}
216
217/* ===== BOTÃO "VER PLANOS": ajustar cor do texto ===== */
218#btnSelectCategory {
219    color: #fff !important;                       /* força o texto branco */
220}
221
222/* ===== SELECT CINZA SUAVE (LIGHT UI) ===== */
223.form-select {
224    width: 100%;
225    padding: 14px 18px;
226
227    background: #f5f5f5;                 /* cinza bem claro */
228    border: 1px solid #e5e7eb;           /* borda suave */
229    border-radius: var(--radius-md);
230
231    color: #262b2d;                     /* texto cinza escuro (não preto) */
232
233    font-family: var(--font);
234    font-size: 1rem;
235    font-weight: 500;
236
237    cursor: pointer;
238    transition: var(--transition);
239    appearance: none;
240
241    /* seta em cinza neutro */
242    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
243
244    background-repeat: no-repeat;
245    background-position: right 14px center;
246    padding-right: 44px;
247}
248
249.hero-subtitle {
250    color: #262b2d !important;
251}
252
253/* ===== PLAN CARD POPULAR: fundo sólido ===== */
254.plan-card.popular {
255border: none !important;     
256    background: #c5f3f9 !important;   /* cor sólida */
257}
258
259.plan-popular-badge {
260color: #ffffff !important;
261background: #045163 !important;
262opacity: none !important;
263}
264
265.plan-loyalty, #plansTitle, #addressTitle, #viabilityLoading span, .reg-section-header, #regSummarySpeed, #regSummaryName, .reg-summary-badge, .plans-section-title, #regSummaryPrice {
266color: #262B2D !important; 
267}
268
269/* ===== BOTÃO VOLTAR (CÍRCULO): fundo sólido + sem borda ===== */
270.btn-back {
271    background: #1da5b3 !important;   /* cor sólida */
272    border: none !important;          /* remove borda */
273    color: #fff;                      /* ícone branco pra contraste */
274}
275
276/* ===== PLAN CARD: borda sutil ===== */
277.plan-card {
278    border: 1px solid #262b2d;
279}
280
281/* ===== PLAN TABS: fundo sólido + sem borda + sem transparência ===== */
282.plan-tabs {
283    background: #f3f4f5 !important;  /* cor sólida */
284    border: none !important;         /* remove borda */
285margin-bottom: 40px !important;
286}
287
288/* ===== PLAN TAB: estado não selecionado ===== */
289.plan-tab {
290    color: #262b2d !important;
291}
292
293.plan-tab active, .btn-plan {
294    color: #ffffff !important;
295}
296
297/* ===== BOTÃO PLAN: sombra no hover igual ao padrão ===== */
298.btn-plan:hover {
299    box-shadow: 0 4px 20px 
300    color-mix(in srgb, var(--form-btn-border, var(--accent)) 30%, transparent);
301}
302
303/* ===== BOTÃO PRIMARY: sem sombra padrão ===== */
304.btn-primary {
305    box-shadow: none;
305 /* remove a sombra fixa */
306}
307
308/* ===== BOTÃO PRIMARY: sombra apenas no hover ===== */
309.btn-primary:hover {
310    box-shadow: 0 4px 20px 
311    color-mix(in srgb, var(--form-btn-border, var(--accent)) 30%, transparent);
312}
313
314/* ===== PLAN TAB: estado inativo ===== */
315.plan-tab {
316    color: #262B2D !important;   /* texto escuro */
317}
318
319/* ===== PLAN TAB: estado ativo ===== */
320.plan-tab.active {
321    color: #fff !important;      /* mantém branco */
322    box-shadow: none !important; /* remove a sombra */
323}
324
325/* ===== WRAPPER GERAL ===== */
326#condoFields {
327    background: transparent !important;
328}
329
330/* ===== ENDEREÇO ===== */
331.condo-address-text {
332    color: #262B2D !important;
333    font-weight: 500 !important;
334}
335
336/* ===== LABELS ===== */
337.form-field label {
338    color: #262B2D !important;
339    font-size: 0.85rem !important;
340    font-weight: 600 !important;
341    margin-bottom: 6px !important;
342    display: block !important;
343}
344
345/* ===== INPUTS ===== */
346.form-input {
347    background: #f5f6f7 !important;              /* cinza bem leve */
348    border: 1px solid #e1e3e5 !important;        /* borda suave */
349    color: #262B2D !important;
350    padding: 14px 16px !important;
351    border-radius: 8px !important;
352    transition: all 0.2s ease !important;
353}
354
355/* ===== PLACEHOLDER ===== */
356.form-input::placeholder {
357    color: #9aa0a6 !important;
358}
359
360/* ===== HOVER INPUT ===== */
361.form-input:hover {
362    border-color: #cfd4d7 !important;
363    background: #f1f3f4 !important;
364}
365
366/* ===== FOCUS INPUT ===== */
367.form-input:focus {
368    outline: none !important;
369    border-color: #1da5b3 !important;
370    background: #ffffff !important;
371    box-shadow: 0 0 0 3px rgba(29, 165, 179, 0.12) !important;
372}
373
374/* ===== BOTÃO ===== */
375#btnCondoNext {
376    background: #1da5b3 !important;
377    color: #ffffff !important;
378    border: none !important;
379    box-shadow: none !important;
380    transition: all 0.2s ease !important;
381}
382
383/* ===== HOVER BOTÃO ===== */
384#btnCondoNext:hover {
385    filter: brightness(0.95) !important;
386}
387
388/* ===== REMOVER FUNDO E BORDA DO ADDRESS ===== */
389.address-display-compact {
390    background: transparent !important;
391    border: none !important;
392}
393
394/* ===== COR DO BADGE SPEED ===== */
395.badge-speed {
396    color: #1da5b3 !important;
397}
398
399.reg-summary-period, reg-summary-value, reg-summary-currency { 
400color: #045163 !important; }
401
402/* ===== CONTAINER DAS SEÇÕES ===== */
403.reg-section {
404    background: #ffffff !important;
405    border: none !important;
406    border-radius: 0px !important;
407}
408
409/* ===== HEADER ===== */
410.reg-section-header {
411    background: #ffffff !important;
412    border-bottom: 1px solid #e6e7e8 !important;
413    color: #262B2D !important;
414}
415
416.reg-section-header h3 {
417    color: #262B2D !important;
418}
419
420.reg-section-header svg {
421    stroke: #262B2D !important;
422}
423
424/* ===== BODY ===== */
425.reg-section-body {
426    background: #ffffff !important;
427    color: #262B2D !important;
428}
429
430/* ===== LABELS ===== */
431.form-label {
432    color: #5f6368 !important;
433}
434
435/* ===== INPUTS ===== */
436.form-input,
437.reg-input {
438    background: #f5f6f7 !important;
439    border: 1px solid #e6e7e8 !important;
440    color: #262B2D !important;
441}
442
443.form-input::placeholder {
444    color: #9aa0a6 !important;
445}
446
447/* ===== TOGGLE PF / PJ ===== */
448.pessoa-toggle-label {
449    background: #f5f6f7 !important;
450    border: 1px solid #e6e7e8 !important;
451    color: #262B2D !important;
452}
453
454.pessoa-toggle-option input:checked + .pessoa-toggle-label {
455    background: #1da5b3 !important;
456    color: #ffffff !important;
457    border-color: #1da5b3 !important;
458}
459
460/* ===== UPLOAD BOX ===== */
461.upload-box {
462    background: #f5f6f7 !important;
463    border: 1px dashed #d1d5db !important;
464    color: #262B2D !important;
465}
466
467.upload-title {
468    color: #262B2D !important;
469}
470
471.upload-hint {
472    color: #6b7280 !important;
473}
474
475.upload-status {
476    color: #1da5b3 !important;
477}
478
479.upload-icon svg {
480    stroke: #262B2D !important;
481}
482
483/* ===== SERVICES LIST ===== */
484.services-list {
485    color: #262B2D !important;
486}
487
488/* ===== CALENDÁRIO ===== */
489.sched-calendar {
490    background: #ffffff !important;
491}
492
493.sched-weekday {
494    color: #6b7280 !important;
495}
496
497.sched-day {
498    background: #f5f6f7 !important;
499    color: #262B2D !important;
500    border: 1px solid #e6e7e8 !important;
501}
502
503.sched-day.available {
504    background: #ffffff !important;
505}
506
507.sched-day.blocked {
508    background: #eeeeee !important;
509    color: #9aa0a6 !important;
510}
511
512/* ===== SELECTED DAY ===== */
513.sched-day.selected {
514    background: #1da5b3 !important;
515    color: #ffffff !important;
516}
517
518/* ===== TURNOS ===== */
519.shift-box {
520    background: #f5f6f7 !important;
521    border: 1px solid #e6e7e8 !important;
522    color: #262B2D !important;
523}
524
525.shift-option input:checked + .shift-box {
526    background: #1da5b3 !important;
527    color: #ffffff !important;
528    border-color: #1da5b3 !important;
529}
530
531/* ===== ALERTA ===== */
532#schedConfirmNote {
533    background: #fff7ed !important;
534    border: 1px solid #fed7aa !important;
535    color: #9a3412 !important;
536}
537
538/* ===== TERMS ===== */
539.reg-terms-label {
540    color: #262B2D !important;
541}
542
543.reg-terms-link {
544    color: #1da5b3 !important;
545}
546
547/* ===== CHECKBOX ===== */
548.reg-terms-check {
549    border: 1px solid #d1d5db !important;
550    background: #ffffff !important;
551}
552
553#regConsent:checked + .reg-terms-check {
554    background: #1da5b3 !important;
555    border-color: #1da5b3 !important;
556}
557
558/* ===== RESUMO FINAL ===== */
559.reg-total-summary {
560    background: #f5f6f7 !important;
561    border: 1px solid #e6e7e8 !important;
562}
563
564.reg-total-row {
565    color: #262B2D !important;
566}
567
568.reg-total-final {
569    font-weight: 700 !important;
570}
571
572/* ===== BOTÃO FINAL ===== */
573.btn-submit-registration {
574    background: #1da5b3 !important;
575    color: #ffffff !important;
576    border: none !important;
577}
578
579.reg-section-header h3 {
580    color: #262B2D !important;
581    -webkit-text-fill-color: #262B2D !important;
582}
583
584/* ===== REG ADDRESS ===== */
585#regAddress[readonly],
586#regNumero[readonly],
587#regComplement[readonly] {
588    background: #f5f6f7 !important;
589    color: #262B2D !important;
590    border: 1px solid #e6e7e8 !important;
591    border-style: solid !important;
592    box-shadow: none !important;
593    outline: none !important;
594    cursor: default !important;
595}
596
597/* ===== REMOVE QUALQUER FOCO ===== */
598#regAddress:focus,
599#regNumero:focus,
600#regComplement:focus,
601#regAddress:focus-visible,
602#regNumero:focus-visible,
603#regComplement:focus-visible {
604    box-shadow: none !important;
605    outline: none !important;
606    border: 1px solid #e6e7e8 !important;
607}
608
609/* ===== FUNDO DO MODAL ===== */
610#termsModal .modal-content {
611    background: #ffffff !important;
612    color: #262B2D !important;
613    border: 1px solid #e6e7e8 !important;
614    border-radius: 12px !important;
615}
616
617/* ===== TÍTULO ===== */
618#termsModal h2 {
619    color: #262B2D !important;
620}
621
622/* ===== ÁREA DE TEXTO ===== */
623#termsScrollArea {
624    background: #f5f6f7 !important;
625    border: 1px solid #e6e7e8 !important;
626    color: #262B2D !important;
627}
628
629/* REMOVE ESTILO ANTIGO INLINE (força) */
630#termsScrollArea * {
631    color: #262B2D !important;
632}
633
634/* ===== PARÁGRAFOS ===== */
635#termsScrollArea p {
636    color: #262B2D !important;
637}
638
639/* ===== TÍTULO GRANDE DO TERMO ===== */
640#termsScrollArea strong {
641    color: #262B2D !important;
642}
643
644/* ===== HR ===== */
645#termsScrollArea hr {
646    border: none !important;
647    border-top: 1px solid #e6e7e8 !important;
648}
649
650/* ===== SCROLLBAR (opcional, mas deixa premium) ===== */
651#termsScrollArea::-webkit-scrollbar {
652    width: 6px !important;
653}
654
655#termsScrollArea::-webkit-scrollbar-thumb {
656    background: #d1d5db !important;
657    border-radius: 6px !important;
658}
659
660/* ===== TEXTO DE HINT ===== */
661#termsScrollHint {
662    color: #6b7280 !important;
663    opacity: 1 !important;
664}
665
666/* ===== BOTÃO DESABILITADO ===== */
667#termsAcceptBtn[disabled] {
668    background: #e5e7eb !important;
669    color: #9aa0a6 !important;
670    cursor: not-allowed !important;
671    opacity: 1 !important;
672}
673
674/* ===== BOTÃO ATIVO ===== */
675#termsAcceptBtn:not([disabled]) {
676    background: #1da5b3 !important;
677    color: #ffffff !important;
678}
679
680/* ===== DIA SELECIONADO ===== */
681.sched-day.selected {
682    box-shadow: none !important;
683    border: none !important;
684}
685
686/* ===== TURNO SELECIONADO ===== */
687.shift-option input:checked + .shift-box {
688    box-shadow: none !important;
689    border: none !important;
690}
691
692/* ===== AUTOFILL GLOBAL ===== */
693input:-webkit-autofill,
694textarea:-webkit-autofill,
695select:-webkit-autofill {
696    -webkit-box-shadow: 0 0 0 1000px #e6f7f9 inset !important;
697    -webkit-text-fill-color: #262B2D !important;
698    border: 1px solid #1da5b3 !important;
699    transition: background-color 9999s ease-in-out 0s !important;
700}
701
702/* ===== ESTADOS ===== */
703input:-webkit-autofill:hover,
704input:-webkit-autofill:focus,
705input:-webkit-autofill:active,
706textarea:-webkit-autofill:hover,
707textarea:-webkit-autofill:focus,
708select:-webkit-autofill:focus {
709    -webkit-box-shadow: 0 0 0 1000px #e6f7f9 inset !important;
710    -webkit-text-fill-color: #262B2D !important;
711}
712
713.hero-content:has(#stepPlans:not(.hidden)) {
714    max-width: 1300px !important;
715}
716
717.plans-grid-inner {
718    gap: 40px !important;
719}
720
721.service-info strong {
722    color: #262B2D !important;
723}            </style>
724</head>
725<body>
726    <!-- Header -->
727    <header class="header" id="header">
728        <div class="header-container">
729            <div class="logo" id="logo">
730                                    <img src="uploads/logo_header_1776295570.png" alt="Marvitel" style="height:18px;object-fit:contain;">
731                            </div>
732            <nav class="nav" id="nav">
733                <a href="#" class="nav-link" onclick="resetApp(); return false;">Início</a>
734                <a href="#como-funciona" class="nav-link">
734Como Funciona</a>
735                <a href="#contato" class="nav-link">Contato</a>
736            </nav>
737            <button class="mobile-menu-btn" id="mobileMenuBtn" aria-label="Abrir menu">
738                <span></span><span></span><span></span>
739            </button>
740        </div>
741    </header>
742
743    <!-- Hero Section -->
744    <section class="hero" id="hero">
745        <div class="hero-bg">
746            <div class="hero-wave"></div>
747            <div class="hero-particles">
748                <div class="particle"></div>
749                <div class="particle"></div>
750                <div class="particle"></div>
751                <div class="particle"></div>
752                <div class="particle"></div>
753            </div>
754        </div>
755        <div class="hero-content">
756            <h1 class="hero-title">
757                <span class="hero-title-line">Seja bem-vindo!</span>
758                            </h1>
759
760            <!-- Step 0: Category Selection -->
761            <div class="consulta-card" id="stepCategory">
762                <p class="hero-subtitle" style="margin-bottom: 20px;">Selecione como podemos te ajudar:</p>
763                <div class="category-select-wrapper">
764                    <select id="categorySelect" class="form-select">
765                        <option value="">Carregando...</option>
766                    </select>
767                </div>
768                <button id="btnSelectCategory" class="btn btn-primary btn-block" style="margin-top: 20px;" disabled>
769                    VER PLANOS
770                </button>
771            </div>
772
773            <!-- Step 1: Plans Display -->
774            <div class="consulta-card hidden" id="stepPlans">
775                <div class="plans-header">
776                    <button id="btnBackCategory" class="btn-back" aria-label="Voltar">
777                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
778                    </button>
779                    <h2 id="plansTitle" class="plans-section-title">Escolha seu Plano</h2>
780                </div>
781                <div id="plansLoading" class="loading">
782                    <div class="spinner"></div>
783                    <span>Carregando planos...</span>
784                </div>
785                <div id="plansGrid" class="plans-grid"></div>
786            </div>
787
788            <!-- Step SVA: exige contrato ativo (só clientes contratam SVA) -->
789            <div class="consulta-card hidden" id="stepSvaContract">
790                <div class="plans-header">
791                    <button id="btnBackSvaPlans" class="btn-back" aria-label="Voltar">
792                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
793                    </button>
794                    <h2 class="plans-section-title">Você já é cliente?</h2>
795                </div>
796                <div id="selectedPlanSummarySva" class="selected-plan-badge"></div>
797
798                <!-- Fase 1: informar o documento -->
799                <div id="svaPhaseDoc">
800                    <p class="form-label" style="margin-top:8px;">Este serviço é exclusivo para clientes com <strong>contrato ativo</strong>. Informe seu CPF ou CNPJ.</p>
801                    <label class="form-label" for="svaDocument">CPF / CNPJ</label>
802                    <input type="text" id="svaDocument" class="form-input" placeholder="000.000.000-00" inputmode="numeric" maxlength="18">
803                    <button id="btnSvaCheck" class="btn btn-primary btn-block" style="margin-top:16px;">VERIFICAR</button>
804                </div>
805
806                <!-- Fase 2: escolher o contrato ao qual o SVA será atrelado -->
807                <div id="svaPhaseContract" class="hidden">
808                    <p class="form-label" style="margin-top:8px;">Olá, <strong id="svaClientName"></strong>! A qual contrato deseja atrelar este serviço?</p>
809                    <label class="form-label" for="svaContractSelect">Contrato</label>
810                    <select id="svaContractSelect" class="form-input"></select>
811                    <button id="btnSvaContinue" class="btn btn-primary btn-block" style="margin-top:16px;">CONTINUAR</button>
812                </div>
813
814                <div id="svaLoading" class="loading hidden" style="margin-top:12px;">
815                    <div class="spinner"></div>
816                    <span>Verificando seu contrato...</span>
817                </div>
818                <div id="svaError" class="error-message hidden" style="margin-top:12px;"></div>
819            </div>
820
821            <!-- Step 2: Address / Viability -->
822            <div class="consulta-card hidden" id="stepAddress">
823                <div class="plans-header">
824                    <button id="btnBackPlans" class="btn-back" aria-label="Voltar">
825                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
826                    </button>
827                    <h2 id="addressTitle" class="plans-section-title">Local de instalação</h2>
828                </div>
829
830                <div id="selectedPlanSummary" class="selected-plan-badge"></div>
831
832                <!-- Condominium: just unit/apt -->
833                <div id="condoFields" class="hidden">
834                    <div class="address-display-compact">
835                        <p id="condoAddress" class="condo-address-text"></p>
836                    </div>
837                    <div class="form-row-inline">
838                        <div class="form-field">
839                            <label for="condoUnit">Nº Casa / Apartamento</label>
840                            <input type="text" id="condoUnit" class="form-input" placeholder="Ex: Apt 102 / Casa 15">
841                        </div>
842                        <div class="form-field">
843                            <label for="condoComplement">Complemento</label>
844                            <input type="text" id="condoComplement" class="form-input" placeholder="Bloco, Torre...">
845                        </div>
846                    </div>
847                    <button id="btnCondoNext" class="btn btn-primary btn-block" style="margin-top:16px;">
848                        EU QUERO AGORA
849                    </button>
850                </div>
851
852                <!-- Link Dedicado / Empresarial: CEP + viability -->
853                <div id="cepFields" class="hidden">
854                    <label class="form-label" for="cep">Informe seu CEP</label>
855                    <div class="input-group">
856                        <div class="input-icon">
857                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
858                        </div>
859                        <input type="text" id="cep" name="cep" class="form-input" placeholder="00000-000" maxlength="9">
860                        <button type="button" id="buscarCepBtn" class="btn-search" aria-label="Buscar CEP">
861                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
862                        </button>
863                    </div>
864                    <div id="cepLoading" class="loading hidden">
865                        <div class="spinner"></div>
866                        <span>Buscando endereço...</span>
867                    </div>
868                    <div id="cepError" class="error-message hidden"></div>
869                    <div id="cepAddress" class="address-found hidden">
870                        <p id="cepAddressText"></p>
871                        <button id="btnCheckViability" class="btn btn-primary btn-block" style="margin-top:12px;">
872                            VERIFICAR DISPONIBILIDADE
873                        </button>
874                    </div>
875                </div>
876            </div>
877
878            <!-- Step 3: Registration / Cadastro -->
879            <div class="consulta-card hidden" id="stepRegistration">
880                <div class="plans-header">
881                    <button id="btnBackAddress" class="btn-back" aria-label="Voltar">
882                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
882<line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
883                    </button>
884                    <h2 class="plans-section-title" id="regPlanTitle">Finalizar Assinatura</h2>
885                </div>
886                
887                <div class="registration-form">
888
889                    <!-- Seção: Resumo do Plano -->
890                    <div class="reg-section reg-summary-card">
891                        <div class="reg-summary-plan">
892                            <div class="reg-summary-icon">
893                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
894                            </div>
895                            <div class="reg-summary-info">
896                                <span class="reg-summary-speed" id="regSummarySpeed">--</span>
897                                <span class="reg-summary-name" id="regSummaryName">--</span>
898                            </div>
899                            <div class="reg-summary-price" id="regSummaryPrice">
900                                <span class="reg-summary-currency">R$</span>
901                                <span class="reg-summary-value">0,00</span>
902                                <span class="reg-summary-period">/mês</span>
903                            </div>
904                        </div>
905                        <div class="reg-summary-badge">
906                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"></polyline></svg>
907                            Cobertura confirmada para o seu endereço
908                        </div>
909                    </div>
910
911                    <!-- Seção: Local de Instalação -->
912                    <div class="reg-section">
913                        <div class="reg-section-header">
914                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
915                            <h3>Local de Instalação</h3>
916                        </div>
917                        <div class="reg-section-body">
918                            <div class="form-grid form-grid-3">
919                                <div class="form-group fg-span-2">
920                                    <label class="form-label" for="regAddress">Endereço</label>
921                                    <input type="text" id="regAddress" class="form-input reg-input" readonly>
922                                </div>
923                                <div class="form-group">
924                                    <label class="form-label" for="regNumero">Número *</label>
925                                    <input type="text" id="regNumero" class="form-input reg-input" placeholder="Nº" maxlength="10">
926                                </div>
927                            </div>
928                            <div class="form-grid form-grid-2">
929                                <div class="form-group">
930                                    <label class="form-label" for="regComplement">Complemento</label>
931                                    <input type="text" id="regComplement" class="form-input reg-input" placeholder="Apto, Bloco, Casa...">
932                                </div>
933                            </div>
934                        </div>
935                    </div>
936
937                    <!-- Seção: Dados Pessoais -->
938                    <div class="reg-section">
939                        <div class="reg-section-header">
940                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
941                            <h3>Dados Pessoais</h3>
942                        </div>
943                        <div class="reg-section-body">
944                            <div class="pessoa-toggle">
945                                <label class="pessoa-toggle-option">
946                                    <input type="radio" name="personType" value="PF" checked>
947                                    <span class="pessoa-toggle-label">
948                                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
949                                        Pessoa Física
950                                    </span>
951                                </label>
952                                <label class="pessoa-toggle-option">
953                                    <input type="radio" name="personType" value="PJ">
954                                    <span class="pessoa-toggle-label">
955                                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path><line x1="3" y1="6" x2="21" y2="6"></line></svg>
956                                        Pessoa Jurídica
957                                    </span>
958                                </label>
959                            </div>
960
961                            <!-- Pessoa Física Fields -->
962                            <div id="fieldsPF">
963                                <div class="form-grid form-grid-3">
964                                    <div class="form-group fg-span-2">
965                                        <label class="form-label" for="regNamePF">Nome Completo *</label>
966                                        <input type="text" id="regNamePF" class="form-input reg-input" placeholder="João da Silva">
967                                    </div>
968                                    <div class="form-group">
969                                        <label class="form-label" for="regCpf">CPF *</label>
970                                        <input type="text" id="regCpf" class="form-input reg-input" placeholder="000.000.000-00" maxlength="14">
971                                        <div id="cpfVoalleStatus" style="font-size:0.8rem;margin-top:4px;"></div>
972                                    </div>
973                                </div>
974                                <div class="form-grid form-grid-2">
975                                    <div class="form-group">
976                                        <label class="form-label" for="regRg">RG</label>
977                                        <input type="text" id="regRg" class="form-input reg-input" placeholder="00.000.000-0">
978                                    </div>
979                                    <div class="form-group">
980                                        <label class="form-label" for="regBirth">Data de Nascimento *</label>
981                                        <input type="date" id="regBirth" class="form-input reg-input">
982                                    </div>
983                                </div>
984                            </div>
985
986                            <!-- Pessoa Jurídica Fields -->
987                            <div id="fieldsPJ" class="hidden">
988                                <div class="form-grid form-grid-3">
989                                    <div class="form-group fg-span-2">
990                                        <label class="form-label" for="regNamePJ">Razão Social *</label>
991                                        <input type="text" id="regNamePJ" class="form-input reg-input" placeholder="Minha Empresa LTDA">
992                                    </div>
993                                    <div class="form-group">
994                                        <label class="form-label" for="regCnpj">CNPJ *</label>
995                                        <input type="text" id="regCnpj" class="form-input reg-input" placeholder="00.000.000/0000-00" maxlength="18">
996                                        <div id="cnpjStatus" style="font-size:0.8rem;margin-top:4px;"></div>
997                                    </div>
998                                </div>
999                                <div class="form-grid form-grid-2">
1000                                    <div class="form-group">
1001                                        <label class="form-label" for="regIe">Inscrição Estadual (I.E.)</label>
1002                                        <input type="text" id="regIe" class="form-input reg-input" placeholder="Caso possua">
1003                                    </div>
1004                                    <div class="form-group">
1005                                        <label class="form-label" for="regPhoneCom">Telefone Comercial</label>
1006                                        <input type="text" id="regPhoneCom" class="form-input reg-input" placeholder="(00) 0000-0000">
1007                                    </div>
1008                                </div>
1009                            </div>
1010
1011                            <!-- Campos Comuns de Contato -->
1012                            <div class="form-grid form-grid-2">
1013                                <div class="form-group">
1014                                    <label class="form-label" for="regPhoneCell">Celular / WhatsApp *</label>
1015                                    <input type="text" id="regPhoneCell" class="form-input reg-input" placeholder="(00) 00000-0000" maxlength="15">
1016                                </div>
1017                                <div class="form-group">
1018                                    <label class="form-label" for="regEmail">E-mail *</label>
1019                                    <input type="email" id="regEmail" class="form-input reg-input" placeholder="[email protected]">
1020                                </div>
1021                            </div>
1022                        </div>
1023                    </div>
1024
1025                    <!-- Seção: Documentos -->
1026                    <div class="reg-section">
1027                        <div class="reg-section-header">
1028                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>
1029                            <h3>Documentos</h3>
1030                        </div>
1031                        <div class="reg-section-body">
1032                            <!-- Documentos Pessoa Física -->
1033                            <div id="docsPF" class="upload-grid">
1034                                <label class="upload-box" for="fileResidencia">
1035                                    <input type="file" id="fileResidencia" accept="image/*,.pdf" hidden>
1036                                    <div class="upload-icon">
1037                                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
1038                                    </div>
1039                                    <span class="upload-title">Comprovante de Residência</span>
1040                                    <span class="upload-hint">JPG, PNG ou PDF</span>
1041                                    <span class="upload-status" data-for="fileResidencia">Clique para enviar</span>
1042                                </label>
1043                                <label class="upload-box" for="fileDoc">
1044                                    <input type="file" id="fileDoc" accept="image/*,.pdf" hidden>
1045                                    <div class="upload-icon">
1046                                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="4" width="18" height="16" rx="2"/><line x1="7" y1="8" x2="17" y2="8"/><line x1="7" y1="12" x2="13" y2="12"/></svg>
1047                                    </div>
1048                                    <span class="upload-title">RG e CPF ou CNH</span>
1049                                    <span class="upload-hint">JPG, PNG ou PDF</span>
1050                                    <span class="upload-status" data-for="fileDoc">Clique para enviar</span>
1051                                </label>
1052                                <label class="upload-box" for="fileSelfie">
1053                                    <input type="file" id="fileSelfie" accept="image/*" capture="user" hidden>
1054                                    <div class="upload-icon">
1055                                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>
1056                                    </div>
1057                                    <span class="upload-title">Selfie com Documento</span>
1058                                    <span class="upload-hint">JPG, PNG, WEBP ou HEIC (abre a câmera no celular)</span>
1059                                    <span class="upload-status" data-for="fileSelfie">Clique para enviar</span>
1060                                </label>
1061                            </div>
1062                            <!-- Documentos Pessoa Jurídica -->
1063                            <div id="docsPJ" class="upload-grid hidden">
1064                                <label class="upload-box" for="fileContratoSocial">
1065                                    <input type="file" id="fileContratoSocial" accept="image/*,.pdf" hidden>
1066                                    <div class="upload-icon">
1067                                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line></svg>
1068                                    </div>
1069                                    <span class="upload-title">Contrato Social / Estatuto</span>
1070                                    <span class="upload-hint">JPG, PNG ou PDF</span>
1071                                    <span class="upload-status" data-for="fileContratoSocial">Clique para enviar</span>
1072                                </label>
1073                                <label class="upload-box" for="fileDocRepresentante">
1074                                    <input type="file" id="fileDocRepresentante" accept="image/*,.pdf" hidden>
1075                                    <div class="upload-icon">
1076                                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="4" width="18" height="16" rx="2"/><line x1="7" y1="8" x2="17" y2="8"/><line x1="7" y1="12" x2="13" y2="12"/></svg>
1077                                    </div>
1078                                    <span class="upload-title">Documento do Representante</span>
1079                                    <span class="upload-hint">RG, CPF ou CNH — JPG, PNG ou PDF</span>
1080                                    <span class="upload-status" data-for="fileDocRepresentante">Clique para enviar</span>
1081                                </label>
1082                                <label class="upload-box" for="fileComprovantePJ">
1083                                    <input type="file" id="fileComprovantePJ" accept="image/*,.pdf" hidden>
1084                                    <div class="upload-icon">
1085                                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
1086                                    </div>
1087                                    <span class="upload-title">Comprovante de Endereço</span>
1088                                    <span class="upload-hint">JPG, PNG ou PDF</span>
1089                                    <span class="upload-status" data-for="fileComprovantePJ">Clique para enviar</span>
1090                                </label>
1091                            </div>
1092                        </div>
1093                    </div>
1094
1095                    <!-- Seção: Serviços Adicionais -->
1096                    <div class="reg-section">
1097                        <div class="reg-section-header">
1098                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>
1099                            <h3>Serviços Adicionais</h3>
1100                        </div>
1101                        <div class="reg-section-body">
1102                            <div class="services-list" id="servicesList">
1103                                <p class="services-loading">Carregando serviços...</p>
1104                            </div>
1105                        </div>
1106                    </div>
1107
1108                    <!-- Seção: Dados de Cobrança -->
1109                    <div class="reg-section">
1110                        <div class="reg-section-header">
1111                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect><line x1="1" y1="10" x2="23" y2="10"></line></svg>
1112                            <h3>Dados de Cobrança</h3>
1113                        </div>
1114                        <div class="reg-section-body">
1115                            <div class="form-grid form-grid-2">
1116                                <div class="form-group">
1117                                    <label class="form-label" for="regPaymentMethod">Forma de pagamento</label>
1118                                    <select id="regPaymentMethod" class="form-input reg-input">
1119                                        <option value="">Carregando...</option>
1120                                    </select>
1121                                </div>
1122                                <div class="form-group">
1123                                    <label class="form-label" for="regDueDate">Vencimento</label>
1124                                    <select id="regDueDate" class="form-input reg-input">
1125                                        <option value="">Carregando...</option>
1126                                    </select>
1127                                </div>
1128                            </div>
1129                            <div class="form-grid form-grid-2">
1130                                <div class="form-group">
1131                                    <label class="form-label">Taxa de Instalação</label>
1132                                    <div class="install-fee-badge">
1133                                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>
1134                                        GRATUITA
1135                                    </div>
1136                                </div>
1137                                <div class="form-group">
1138                                    <label class="form-label" for="regCoupon">Cupom Promocional</label>
1139                                    <div class="coupon-input-wrapper">
1140                                        <input type="text" id="regCoupon" class="form-input reg-input" placeholder="Digite o cupom" style="text-transform: uppercase;">
1141                                        <span class="coupon-feedback" id="couponFeedback"></span>
1142                                    </div>
1143                                </div>
1144                            </div>
1145                        </div>
1146                    </div>
1147
1148                    <!-- Seção: Pré-agendamento de Instalação -->
1149                    <div class="reg-section " id="schedulingSection">
1150                        <div class="reg-section-header">
1151                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
1152                            <h3>Pré-agendamento de Instalação</h3>
1153                        </div>
1154                        <div class="reg-section-body">
1155                            <p style="font-size:0.85rem; opacity:.7; margin:0 0 16px;">
1156                                Escolha uma data e turno de preferência para a instalação. Máximo de vagas por turno é limitado.
1157                            </p>
1158
1159                            <div style="display:flex; gap:8px; align-items:center; margin-bottom:16px;">
1160                                <button type="button" id="schedPrevMonth" class="btn" style="padding:6px 12px; font-size:0.85rem; min-width:auto;">◀</button>
1161                                <span id="schedMonthLabel" style="font-weight:600; font-size:1rem; flex:1; text-align:center;"></span>
1162                                <button type="button" id="schedNextMonth" class="btn" style="padding:6px 12px; font-size:0.85rem; min-width:auto;">▶</button>
1163                            </div>
1164
1165                            <div id="schedCalendar" style="margin-bottom:16px;"></div>
1166                            <div id="schedLoading" class="hidden" style="text-align:center; padding:20px;">
1167                                <div class="spinner" style="width:24px;height:24px;border-width:2px;margin:0 auto 8px;"></div>
1168                                <span style="font-size:0.85rem; opacity:.6;">Consultando disponibilidade...</span>
1169                            </div>
1170
1171                            <div id="schedShiftPicker" class="hidden" style="margin-bottom:12px;">
1172                                <p style="font-size:0.88rem; margin:0 0 10px;">Turno para <strong id="schedSelectedDateLabel"></strong>:</p>
1173                                <div style="display:flex; gap:12px;">
1174                                    <label class="shift-option" id="shiftManhaLabel">
1175                                        <input type="radio" name="schedShift" value="manha" id="shiftManha">
1176                                        <span class="shift-box">
1177                                            <span class="shift-icon">☀️</span>
1178                                            <span class="shift-name">Manhã</span>
1179                                            <span class="shift-time">08h - 12h</span>
1180                                            <span class="shift-slots" id="shiftManhaSlots"></span>
1181                                        </span>
1182                                    </label>
1183                                    <label class="shift-option" id="shiftTardeLabel">
1184                                        <input type="radio" name="schedShift" value="tarde" id="shiftTarde">
1185                                        <span class="shift-box">
1186                                            <span class="shift-icon">🌤️</span>
1187                                            <span class="shift-name">Tarde</span>
1188                                            <span class="shift-time">13h - 18h</span>
1189                                            <span class="shift-slots" id="shiftTardeSlots"></span>
1190                                        </span>
1191                                    </label>
1192                                </div>
1193                            </div>
1194
1195                            <div id="schedConfirmNote" class="hidden" style="background:rgba(245,158,11,0.12); border:1px solid rgba(245,158,11,0.3); border-radius:8px; padding:12px 16px; font-size:0.84rem; color:#fbbf24;">
1196                                ⚠️ <strong>Importante:</strong> Este é um pré-agendamento. A confirmação da data e horário será feita pela nossa equipe através do nosso canal de atendimento.
1197                            </div>
1198                        </div>
1199                    </div>
1200
1201                    <!-- Seção: Termos e Resumo Final -->
1202                    <div class="reg-section reg-final-section">
1203                        <div class="reg-terms">
1204                            <label class="reg-terms-label">
1205                                <input type="checkbox" id="regConsent">
1206                                <span class="reg-terms-check">
1207                                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"></polyline></svg>
1208                                </span>
1209                                <span>Li e concordo com o <a href="#" id="termsLink" class="reg-terms-link">Termo de Ciência</a> sobre as condições da contratação.</span>
1210                            </label>
1211                        </div>
1212
1213                        <div class="reg-total-summary">
1214                            <div class="reg-total-row">
1215                                <span id="footerPlanDesc">Plano</span>
1216                                <span id="regPlanPrice">R$ 0,00</span>
1217                            </div>
1218                            <div class="reg-total-row" id="regExtrasRow" style="display:none;">
1219                                <span>Serviços adicionais</span>
1220                                <span id="regExtrasPrice">+ R$ 0,00</span>
1221                            </div>
1222                            <div class="reg-total-row" id="regDiscountRow" style="display:none;">
1223                                <span>Desconto do cupom</span>
1224                                <span id="regDiscountPrice" class="reg-discount-value">- R$ 0,00</span>
1225                            </div>
1226                            <div class="reg-total-row reg-total-final">
1227                                <span>Mensalidade</span>
1228                                <span id="footerTotalRs">R$ 0,00</span>
1229                            </div>
1230                        </div>
1231
1232                        <button id="btnSubmitRegistration" class="btn btn-primary btn-submit-registration">
1233                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
1234                            ASSINAR AGORA
1235                        </button>
1236                    </div>
1237
1238                </div>
1239            </div>
1240
1241            <!-- Step 4: Result -->
1242            <div class="consulta-card hidden" id="stepResult">
1243                <div id="viabilityLoading" class="loading hidden">
1244                    <div class="spinner spinner-lg"></div>
1245                    <span>Consultando viabilidade...</span>
1246                </div>
1247                <div id="viabilityResult"></div>
1248                <div class="form-actions" id="resultActions" style="display:none;">
1249                    <button type="button" id="newSearch" class="btn btn-outline">
1250                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"></polyline><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path></svg>
1251                        Nova Consulta
1252                    </button>
1253                </div>
1254            </div>
1255        </div>
1256    </section>
1257
1258    <!-- Como Funciona Section -->
1259    <section class="features" id="como-funciona">
1260        <div class="container">
1261            <h2 class="section-title">Como Funciona</h2>
1262            <p class="section-subtitle">Consulte a disponibilidade em apenas 3 passos simples</p>
1263            <div class="features-grid">
1264                <div class="feature-card">
1265                    <div class="feature-icon">
1266                        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
1267                    </div>
1268                    <h3>1. Escolha seu Condomínio</h3>
1269                    <p>Selecione o condomínio ou link dedicado desejado.</p>
1270                </div>
1271                <div class="feature-card">
1272                    <div class="feature-icon">
1273                        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line></svg>
1274                    </div>
1275                    <h3>2. Escolha seu Plano</h3>
1276                    <p>Veja os planos disponíveis e escolha o ideal para você.</p>
1277                </div>
1278                <div class="feature-card">
1279                    <div class="feature-icon">
1280                        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
1281                    </div>
1282                    <h3>3. Confirme e Assine</h3>
1283                    <p>Informe seu endereço e contrate agora mesmo!</p>
1284                </div>
1285            </div>
1286        </div>
1287    </section>
1288
1289    <!-- Footer -->
1290    <footer class="footer" id="contato">
1291        <div class="container">
1292            <div class="footer-grid">
1293                                <div class="footer-brand">
1294                                            <img src="uploads/logo_footer_1777382290.png" alt="Marvitel" style="max-height:150px;width:auto;object-fit:contain;">
1295                                        <p class="footer-desc">Internet fibra óptica de alta velocidade.</p>
1296                </div>
1297                                <div class="footer-contact">
1298                    <h4>Fale com um especialista</h4>
1299                    <ul class="contact-list">
1300                                                <li>
1301                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path 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.72c.127.96.361 1.903.7 2.81a2 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-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
1302                            <a href="tel:08006068075">0800 606 8075</a>
1303                        </li>
1304                                                                        <li>
1305                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
1306                            <a href="mailto:[email protected]">[email protected]</a>
1307                        </li>
1308                                            </ul>
1309                </div>
1310                                <div class="footer-address">
1311                    <h4>Endereço</h4>
1312                    <a href="https://www.google.com/maps/search/?api=1&query=R.+Manoel+Esp%C3%ADrito+Santo%2C+51+-+Grageru%2C+Aracaju+-+SE%2C+49025-440" target="_blank" rel="noopener noreferrer" class="footer-address-link">
1313                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
1314                        <span>R. Manoel Espírito Santo, 51 - Grageru, Aracaju - SE, 49025-440</span>
1315                    </a>
1316                </div>
1317                            </div>
1318            <div class="footer-bottom">
1319                <p>&copy; 2026 Marvitel Telecom. Todos os direitos reservados.</p>
1320            </div>
1321        </div>
1322    </footer>
1323
1324    <button type="button" id="backToTopBtn" class="back-to-top-btn" aria-label="Voltar ao topo" title="Voltar ao topo">
1325        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"></polyline></svg>
1326    </button>
1327
1328    
1328<script>
1329        const APP_CONFIG = {
1330            label_condominio: 'Condomínios',
1331            label_link: 'Para Empresas',
1332            label_banda: 'Banda Larga',
1333            plan_button_text: 'EU QUERO ESTE',
1334            urlCondo: "",
1335            urlVendedor: "",
1336            urlCupom: ""        };
1337    </script>
1337
1338    
1338<script src="assets/js/app.js?v=1791462520"></script>
1338
1339</body>
1340</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.