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>© 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.