Calculadora de Or\u00e7amento - Cobrasi Network<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n brand: {\n light: '#60a5fa',\n DEFAULT: '#1d4ed8', \/\/ Azul royal premium para contraste superior\n dark: '#1e40af',\n accent: '#10b981'\n }\n },\n fontFamily: {\n sans: ['Inter', 'sans-serif'],\n }\n }\n }\n }\n <\/script>\n <style>\n body {\n font-family: 'Inter', sans-serif;\n -webkit-font-smoothing: antialiased;\n }\n .package-card {\n transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n }\n .package-card.selected {\n border-color: #1d4ed8;\n background-color: #f8fafc;\n transform: translateY(-6px);\n box-shadow: 0 20px 25px -5px rgba(29, 78, 216, 0.1), 0 10px 10px -5px rgba(29, 78, 216, 0.04);\n }\n \/* Scrollbar Personalizada Premium *\/\n ::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n }\n ::-webkit-scrollbar-track {\n background: #f8fafc;\n }\n ::-webkit-scrollbar-thumb {\n background: #cbd5e1;\n border-radius: 9999px;\n border: 2px solid #f8fafc;\n }\n ::-webkit-scrollbar-thumb:hover {\n background: #94a3b8;\n }\n <\/style>\n<\/head>\n<body class=\"bg-slate-50 text-slate-900 min-h-screen flex flex-col justify-between selection:bg-brand selection:text-white\">\n\n \n <div class=\"bg-slate-900 text-white py-2 px-4 text-xs font-semibold shadow-sm z-50\">\n <div class=\"max-w-6xl mx-auto flex flex-col sm:flex-row justify-between items-center gap-2\">\n <div class=\"flex items-center gap-2\">\n <span class=\"relative flex h-2 w-2\">\n <span class=\"animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75\"><\/span>\n <span class=\"relative inline-flex rounded-full h-2 w-2 bg-emerald-500\"><\/span>\n <\/span>\n <span>C\u00e2mbio de Hoje (Base USD):<\/span>\n <span id=\"ticker-rates\" class=\"text-slate-300\">Carregando taxas de c\u00e2mbio...<\/span>\n <\/div>\n <div class=\"text-slate-400 text-[10px] uppercase tracking-wider\">Painel Integrado Cobrasi Network<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"fixed top-[40px] sm:top-[32px] left-0 right-0 bg-white\/95 backdrop-blur-md border-b border-slate-200\/80 py-3 px-4 shadow-[0_4px_20px_-5px_rgba(0,0,0,0.08)] z-40 transition-all duration-300\">\n <div class=\"max-w-5xl mx-auto flex flex-col md:flex-row justify-between items-center gap-4\">\n \n \n <div class=\"flex items-center justify-between w-full md:w-auto gap-4\">\n <div class=\"flex flex-col\">\n <span class=\"text-[9px] font-black text-slate-400 uppercase tracking-wider\">Total do Or\u00e7amento Escolhido<\/span>\n <div class=\"flex items-baseline gap-1.5\">\n <span id=\"cart-total-usd\" class=\"text-xl md:text-2xl font-black text-slate-950\">$0,00 USD<\/span>\n <span class=\"text-[10px] text-slate-400 font-medium\">\/m\u00eas<\/span>\n <\/div>\n <div class=\"flex gap-2 mt-1 text-[9px] font-bold text-slate-600\">\n <span class=\"bg-slate-100 px-2 py-0.5 rounded text-slate-700 shadow-sm border border-slate-200\/55\" id=\"cart-total-jpy\">\u00a50 JPY<\/span>\n <span class=\"bg-slate-100 px-2 py-0.5 rounded text-slate-700 shadow-sm border border-slate-200\/55\" id=\"cart-total-brl\">R$0,00 BRL<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"flex flex-wrap items-center justify-center gap-3 w-full md:w-auto\">\n \n <div class=\"bg-slate-100\/90 p-1 rounded-2xl border border-slate-200\/60 flex items-center gap-1 shadow-inner\">\n <button type=\"button\" id=\"top-period-monthly\" onclick=\"changeBillingPeriod('mensal')\" \n class=\"px-3.5 py-1.5 rounded-xl text-[10px] md:text-xs font-bold transition-all duration-300 focus:outline-none bg-brand text-white shadow-md\">\n Mensal\n <\/button>\n <button type=\"button\" id=\"top-period-yearly\" onclick=\"changeBillingPeriod('anual')\" \n class=\"px-3.5 py-1.5 rounded-xl text-[10px] md:text-xs font-bold transition-all duration-300 focus:outline-none text-slate-600 hover:text-slate-900 flex items-center gap-1\">\n Anual \n <span class=\"bg-emerald-500 text-white text-[8px] px-1.5 py-0.5 rounded-md font-black uppercase\">-10%<\/span>\n <\/button>\n <\/div>\n\n \n <div class=\"flex flex-col items-center gap-1.5\">\n <div class=\"bg-slate-100\/90 p-1 rounded-2xl border border-slate-200\/60 flex items-center gap-1 shadow-inner\">\n <button type=\"button\" id=\"top-currency-USD\" onclick=\"changePaymentCurrency('USD')\" \n class=\"px-3 py-1.5 rounded-xl text-[10px] md:text-xs font-bold transition-all duration-200\">\n USD\n <\/button>\n <button type=\"button\" id=\"top-currency-JPY\" onclick=\"changePaymentCurrency('JPY')\" \n class=\"px-3 py-1.5 rounded-xl text-[10px] md:text-xs font-bold transition-all duration-200\">\n JPY\n <\/button>\n <button type=\"button\" id=\"top-currency-BRL\" onclick=\"changePaymentCurrency('BRL')\" \n class=\"px-3 py-1.5 rounded-xl text-[10px] md:text-xs font-bold transition-all duration-200\">\n BRL\n <\/button>\n <\/div>\n \n <div class=\"flex gap-1 text-[8px] md:text-[9px] font-black uppercase tracking-wider\">\n <span id=\"header-val-usd\" class=\"px-2 py-0.5 rounded-md border transition-all duration-300\">USD: $0.00<\/span>\n <span id=\"header-val-jpy\" class=\"px-2 py-0.5 rounded-md border transition-all duration-300\">JPY: \u00a50<\/span>\n <span id=\"header-val-brl\" class=\"px-2 py-0.5 rounded-md border transition-all duration-300\">BRL: R$0.00<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n \n <button id=\"checkout-btn\" disabled onclick=\"openCheckoutModal()\" \n class=\"w-full md:w-auto bg-slate-300 text-slate-500 cursor-not-allowed font-extrabold py-3 px-6 rounded-xl transition-all text-xs uppercase tracking-wider flex items-center justify-center gap-2 shadow-md hover:scale-[1.01]\">\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z\"\/>\n <\/svg>\n Avan\u00e7ar & Preencher Dados\n <\/button>\n\n <\/div>\n <\/div>\n\n \n <div class=\"h-[180px] md:h-[130px] w-full\"><\/div>\n\n \n <header class=\"bg-white border-b border-slate-200\/80 py-5 px-4 backdrop-blur-md\">\n <div class=\"max-w-5xl mx-auto flex flex-col sm:flex-row justify-between items-center gap-4\">\n <div class=\"flex items-center gap-4\">\n \n <div class=\"relative group\">\n <div class=\"absolute -inset-1 rounded-2xl bg-gradient-to-r from-brand to-emerald-500 opacity-20 blur-md transition duration-300 group-hover:opacity-40\"><\/div>\n <img decoding=\"async\" id=\"main-brand-logo\" src=\"https:\/\/cobrasi.com.br\/wp-content\/uploads\/2026\/05\/cropped-ChatGPT-Image-16-de-mai.-de-2026-14_11_24.png\" \n alt=\"Logo Cobrasi Network\" \n class=\"relative w-12 h-12 object-contain rounded-xl bg-white p-1 border border-slate-200 shadow-sm transition-transform duration-300 group-hover:scale-105\"\n onerror=\"handleLogoFallback()\">\n <\/div>\n <div>\n <h1 class=\"font-extrabold text-xl tracking-tight text-slate-900 leading-none mb-1\">COBRASI <span class=\"text-brand\">NETWORK<\/span><\/h1>\n <p class=\"text-[10px] text-slate-500 font-bold uppercase tracking-wider\">Sistemas Inteligentes & Integra\u00e7\u00f5es<\/p>\n <\/div>\n <\/div>\n \n <div class=\"flex items-center gap-3\">\n <span class=\"text-xs font-semibold text-slate-500 hidden md:inline\">Precisa de assist\u00eancia t\u00e9cnica?<\/span>\n <a href=\"https:\/\/api.whatsapp.com\/send?phone=817012740701\" target=\"_blank\" \n class=\"text-xs bg-emerald-50 hover:bg-emerald-100 text-emerald-800 font-extrabold py-2.5 px-4 rounded-xl transition-all duration-300 flex items-center gap-2 border border-emerald-200\/60 shadow-sm active:scale-95\">\n <svg class=\"w-4 h-4 text-emerald-600\" fill=\"currentColor\" viewbox=\"0 0 24 24\">\n <path d=\"M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946C.06 5.348 5.397.01 12.008.01c3.202.001 6.212 1.246 8.477 3.514 2.266 2.268 3.507 5.28 3.505 8.484-.004 6.657-5.34 11.997-11.953 11.997-2.005-.001-3.973-.502-5.724-1.457L0 24zm6.59-4.846c1.6.95 3.488 1.449 5.414 1.451 5.508 0 9.99-4.447 9.993-9.904.002-2.645-1.026-5.131-2.895-7.001C17.288 1.83 14.8 1.8 12.013 1.8c-5.514 0-10 4.45-10.003 9.909-.001 1.895.498 3.745 1.445 5.358L2.4 21.64l4.247-1.486z\"\/>\n <\/svg>\n Falar com Consultor\n <\/a>\n <\/div>\n <\/div>\n <\/header>\n\n \n <main class=\"max-w-5xl mx-auto p-4 sm:p-6 lg:p-8 flex-1 w-full pb-16\">\n \n <div class=\"text-center max-w-2xl mx-auto mb-10\">\n <span class=\"text-xs font-extrabold text-brand bg-blue-50\/80 border border-blue-100 px-3.5 py-1.5 rounded-full uppercase tracking-wider\">Simulador de Or\u00e7amentos<\/span>\n <h2 class=\"text-3xl font-black text-slate-900 mt-4 tracking-tight sm:text-4xl\">Escolha a Solu\u00e7\u00e3o Ideal para seu Neg\u00f3cio<\/h2>\n <p class=\"text-slate-500 mt-2 text-sm leading-relaxed\">Selecione o plano desejado abaixo. Ajuste suas prefer\u00eancias de faturamento e moedas diretamente no painel de controle superior fixo.<\/p>\n <\/div>\n\n \n <div class=\"bg-gradient-to-br from-blue-50\/40 via-white to-indigo-50\/20 border border-slate-200 rounded-3xl p-6 sm:p-8 mb-8 shadow-sm relative overflow-hidden ring-4 ring-blue-500\/[0.02]\">\n <div class=\"absolute -top-12 -right-12 w-32 h-32 bg-brand\/5 rounded-full blur-2xl pointer-events-none\"><\/div>\n \n <div class=\"flex items-center gap-2 mb-3\">\n <span class=\"bg-indigo-600 text-white text-[10px] font-black uppercase px-3 py-1 rounded-full tracking-wider shadow-sm\">Etapa Recomendada<\/span>\n <\/div>\n\n <h3 class=\"text-lg font-extrabold text-slate-900 mb-1 flex items-center gap-2\">\n <svg class=\"w-5 h-5 text-indigo-600 shrink-0\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9\"\/>\n <\/svg>\n Deseja um dom\u00ednio personalizado para seu projeto?\n <\/h3>\n <p class=\"text-xs text-slate-500 mb-5 leading-relaxed\">Verificamos na hora a disponibilidade de registro do endere\u00e7o de web que voc\u00ea planeja usar.<\/p>\n \n <div class=\"flex flex-col sm:flex-row gap-3\">\n <div class=\"relative flex-1\">\n <input type=\"text\" id=\"domain-input\" \n class=\"w-full bg-white border border-slate-300 rounded-xl pl-4 pr-10 py-3 text-sm font-semibold focus:outline-none focus:ring-2 focus:ring-brand focus:border-brand transition-all shadow-inner text-slate-800\" \n placeholder=\"Ex: minhaempresa.com ou meuapp.com.br\">\n <\/div>\n <button id=\"btn-check-domain\" onclick=\"checkDomainNetwork()\" \n class=\"bg-indigo-600 hover:bg-indigo-700 text-white font-extrabold py-3 px-6 rounded-xl text-sm transition-all flex items-center justify-center gap-2 shadow-md shadow-indigo-600\/10 active:scale-[0.98] transform\">\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"\/>\n <\/svg>\n Consultar Disponibilidade\n <\/button>\n <\/div>\n \n \n <div id=\"domain-result\" class=\"mt-4 hidden\"><\/div>\n <\/div>\n\n \n <div class=\"grid grid-cols-1 gap-6 mb-12\">\n \n \n <div id=\"card-base\" onclick=\"selectPackage('base')\" \n class=\"package-card border border-slate-200 bg-white rounded-2xl p-6 cursor-pointer hover:border-slate-300 relative overflow-hidden group\">\n <div class=\"absolute top-0 right-0 bg-slate-100 text-slate-700 font-bold text-[9px] uppercase px-3 py-1.5 rounded-bl-xl tracking-wider group-hover:bg-slate-200 transition-colors\">Plano Inicial<\/div>\n <div class=\"flex flex-col md:flex-row justify-between items-start md:items-center gap-6\">\n <div class=\"flex-1\">\n <div class=\"flex items-center gap-2.5 mb-2\">\n <span class=\"w-6 h-6 rounded-lg bg-blue-100 text-brand flex items-center justify-center font-extrabold text-xs\">1<\/span>\n <h3 class=\"text-lg font-bold text-slate-900\">AppSheet Subscription (Base)<\/h3>\n <\/div>\n <p class=\"text-slate-600 text-sm leading-relaxed mb-3\">\n Ideal para estrutura\u00e7\u00e3o prim\u00e1ria de territ\u00f3rios de atendimento e controle \u00e1gil de rotas de vendas direto no smartphone.\n <\/p>\n \n \n <button onclick=\"openVideoModal(event)\" class=\"mb-4 inline-flex items-center gap-1.5 text-xs text-blue-600 hover:text-blue-800 font-bold bg-blue-50\/80 hover:bg-blue-100 px-3 py-1.5 rounded-xl border border-blue-200 transition-colors shadow-sm active:scale-95\">\n <svg class=\"w-3.5 h-3.5 text-blue-600\" fill=\"currentColor\" viewbox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z\" clip-rule=\"evenodd\"\/>\n <\/svg>\n V\u00eddeo de Demonstra\u00e7\u00e3o\n <\/button>\n \n \n <div class=\"bg-slate-50 rounded-xl p-4 border border-slate-200\/60 max-w-xl\">\n <h4 class=\"text-xs font-bold text-slate-800 uppercase tracking-wider mb-2 flex items-center gap-1.5\">\n <svg class=\"w-4 h-4 text-brand\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\"\/>\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\"\/>\n <\/svg>\n Geolocaliza\u00e7\u00e3o Autom\u00e1tica Inteligente:\n <\/h4>\n <p class=\"text-xs text-slate-500 leading-relaxed\">\n Sincronize rotas acionando o bot\u00e3o <strong>\"Add Address\"<\/strong>. O promotor ou t\u00e9cnico preenche apenas os dados essenciais e as coordenadas geogr\u00e1ficas GPS criam o endere\u00e7o de forma 100% automatizada.\n <\/p>\n <\/div>\n <\/div>\n \n <div class=\"w-full md:w-auto flex flex-col sm:flex-row md:flex-col items-stretch sm:items-center md:items-end gap-4 self-stretch md:self-center bg-slate-50 md:bg-transparent p-4 md:p-0 rounded-xl\">\n <div class=\"flex flex-col md:items-end justify-center\">\n <span class=\"text-[10px] font-bold text-slate-400 uppercase tracking-wider\">Pre\u00e7o por Usu\u00e1rio<\/span>\n <span class=\"text-xl font-black text-slate-900\" id=\"base-price-display\">$35,00 USD <span class=\"text-xs font-normal text-slate-500\">\/m\u00eas<\/span><\/span>\n <div class=\"flex gap-1.5 mt-1 text-[10px] font-semibold text-slate-500\">\n <span class=\"bg-slate-200\/75 px-1.5 py-0.5 rounded\" id=\"base-price-jpy\">\u00a50 JPY<\/span>\n <span class=\"bg-slate-200\/75 px-1.5 py-0.5 rounded\" id=\"base-price-brl\">R$0,00 BRL<\/span>\n <\/div>\n <\/div>\n \n \n <div class=\"flex items-center gap-2 bg-white border border-slate-200 rounded-xl p-1.5 shadow-sm\" onclick=\"event.stopPropagation()\">\n <span class=\"text-xs font-bold text-slate-500 px-1\">Usu\u00e1rios:<\/span>\n <button onclick=\"decrementUsers(event)\" class=\"w-8 h-8 bg-slate-100 hover:bg-slate-200 rounded-lg font-bold text-slate-800 transition-colors flex items-center justify-center\">-<\/button>\n <input type=\"number\" id=\"user-count\" value=\"1\" min=\"1\" class=\"w-10 text-center font-bold text-slate-900 border-none outline-none focus:ring-0 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none\" onchange=\"updateUsersInput(this.value)\" oninput=\"updateUsersInput(this.value)\">\n <button onclick=\"incrementUsers(event)\" class=\"w-8 h-8 bg-slate-100 hover:bg-slate-200 rounded-lg font-bold text-slate-800 transition-colors flex items-center justify-center\">+<\/button>\n <\/div>\n\n <button class=\"select-btn w-full bg-slate-100 text-slate-800 font-bold py-2.5 px-4 rounded-xl transition-all text-xs text-center border border-slate-200 hover:bg-brand hover:text-white\">\n Selecionar Plano\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"card-integrated\" onclick=\"selectPackage('integrated')\" \n class=\"package-card border border-slate-200 bg-white rounded-2xl p-6 cursor-pointer hover:border-slate-300 relative overflow-hidden group\">\n <div class=\"absolute top-0 right-0 bg-blue-600 text-white font-bold text-[9px] uppercase px-3 py-1.5 rounded-bl-xl tracking-wider shadow-sm\">Mais Vendido<\/div>\n <div class=\"flex flex-col md:flex-row justify-between items-start md:items-center gap-6\">\n <div class=\"flex-1\">\n <div class=\"flex items-center gap-2.5 mb-2\">\n <span class=\"w-6 h-6 rounded-lg bg-blue-100 text-brand flex items-center justify-center font-extrabold text-xs\">2<\/span>\n <h3 class=\"text-lg font-bold text-slate-900\">Pacote Integrado: AppSheet + WebSite<\/h3>\n <\/div>\n <p class=\"text-slate-600 text-sm leading-relaxed mb-3\">\n Sincroniza\u00e7\u00e3o bidirecional instant\u00e2nea entre a base administrativa mobile (AppSheet) e o seu site institucional p\u00fablico.\n <\/p>\n \n \n <button onclick=\"openVideoModal(event)\" class=\"mb-4 inline-flex items-center gap-1.5 text-xs text-blue-600 hover:text-blue-800 font-bold bg-blue-50\/80 hover:bg-blue-100 px-3 py-1.5 rounded-xl border border-blue-200 transition-colors shadow-sm active:scale-95\">\n <svg class=\"w-3.5 h-3.5 text-blue-600\" fill=\"currentColor\" viewbox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z\" clip-rule=\"evenodd\"\/>\n <\/svg>\n V\u00eddeo de Demonstra\u00e7\u00e3o\n <\/button>\n \n \n <div class=\"bg-blue-50\/50 rounded-xl p-4 border border-blue-100\/60 max-w-xl\">\n <h4 class=\"text-xs font-bold text-blue-950 uppercase tracking-wider mb-2 flex items-center gap-1.5\">\n <svg class=\"w-4 h-4 text-brand\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 10V3L4 14h7v7l9-11h-7z\"\/>\n <\/svg>\n Exemplo Pr\u00e1tico (Exposi\u00e7\u00e3o de Produtos\/Im\u00f3veis\/Carros):\n <\/h4>\n <p class=\"text-xs text-slate-600 leading-relaxed\">\n Registre fotos e especifica\u00e7\u00f5es no celular de qualquer local atrav\u00e9s do aplicativo de gest\u00e3o. Automaticamente, todos os dados alimentam sua planilha e o <strong>produto \u00e9 anunciado no site na mesma hora<\/strong>!\n <\/p>\n <\/div>\n <\/div>\n \n <div class=\"w-full md:w-auto flex flex-col sm:flex-row md:flex-col items-stretch sm:items-center md:items-end gap-4 self-stretch md:self-center bg-slate-50 md:bg-transparent p-4 md:p-0 rounded-xl\">\n <div class=\"flex flex-col md:items-end justify-center\">\n <span class=\"text-[10px] font-bold text-slate-400 uppercase tracking-wider\">Assinatura Mensal<\/span>\n <span class=\"text-xl font-black text-slate-950\" id=\"integrated-price-display\">$90,00 USD <span class=\"text-xs font-normal text-slate-500\">\/m\u00eas<\/span><\/span>\n <div class=\"flex gap-1.5 mt-1 text-[10px] font-semibold text-slate-500\">\n <span class=\"bg-slate-200\/75 px-1.5 py-0.5 rounded\" id=\"integrated-price-jpy\">\u00a50 JPY<\/span>\n <span class=\"bg-slate-200\/75 px-1.5 py-0.5 rounded\" id=\"integrated-price-brl\">R$0,00 BRL<\/span>\n <\/div>\n <\/div>\n \n <button class=\"select-btn w-full bg-slate-100 text-slate-800 font-bold py-2.5 px-4 rounded-xl transition-all text-xs text-center border border-slate-200 hover:bg-brand hover:text-white\">\n Selecionar Plano\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"card-premium\" onclick=\"selectPackage('premium')\" \n class=\"package-card border border-slate-200 bg-white rounded-2xl p-6 cursor-pointer hover:border-slate-300 relative overflow-hidden group\">\n <div class=\"absolute top-0 right-0 bg-emerald-600 text-white font-bold text-[9px] uppercase px-3 py-1.5 rounded-bl-xl tracking-wider shadow-sm\">Completo & Premium<\/div>\n <div class=\"flex flex-col md:flex-row justify-between items-start md:items-center gap-6\">\n <div class=\"flex-1\">\n <div class=\"flex items-center gap-2.5 mb-2\">\n <span class=\"w-6 h-6 rounded-lg bg-blue-100 text-brand flex items-center justify-center font-extrabold text-xs\">3<\/span>\n <h3 class=\"text-lg font-bold text-slate-900\">Pacote Premium: AppSheet + WebSite + Redes Sociais<\/h3>\n <\/div>\n <p class=\"text-slate-600 text-sm leading-relaxed mb-3\">\n Maximiza\u00e7\u00e3o de processos 360\u00b0. Integra\u00e7\u00e3o total conectando sua gest\u00e3o interna interna, cat\u00e1logo online e redes de engajamento social.\n <\/p>\n \n \n <button onclick=\"openVideoModal(event)\" class=\"mb-4 inline-flex items-center gap-1.5 text-xs text-blue-600 hover:text-blue-800 font-bold bg-blue-50\/80 hover:bg-blue-100 px-3 py-1.5 rounded-xl border border-blue-200 transition-colors shadow-sm active:scale-95\">\n <svg class=\"w-3.5 h-3.5 text-blue-600\" fill=\"currentColor\" viewbox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z\" clip-rule=\"evenodd\"\/>\n <\/svg>\n V\u00eddeo de Demonstra\u00e7\u00e3o\n <\/button>\n \n \n <div class=\"bg-emerald-50\/40 rounded-xl p-4 border border-emerald-100 text-xs max-w-xl\">\n <h4 class=\"text-xs font-extrabold text-emerald-950 uppercase tracking-wider mb-2 flex items-center gap-1.5\">\n <svg class=\"w-4 h-4 text-emerald-600\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"\/>\n <\/svg>\n Automa\u00e7\u00e3o de Marketing de Atra\u00e7\u00e3o:\n <\/h4>\n <ul class=\"text-xs text-slate-600 leading-relaxed space-y-1\">\n <li>\u2022 <strong>Social Media Sync:<\/strong> Postagens autom\u00e1ticas no Instagram e Facebook ao cadastrar uma nova entrada de invent\u00e1rio no seu painel administrativo.<\/li>\n <li>\u2022 <strong>Intelig\u00eancia de Tempo:<\/strong> Elimine o retrabalho manual de upload em m\u00faltiplos canais.<\/li>\n <\/ul>\n <\/div>\n <\/div>\n \n <div class=\"w-full md:w-auto flex flex-col sm:flex-row md:flex-col items-stretch sm:items-center md:items-end gap-4 self-stretch md:self-center bg-slate-50 md:bg-transparent p-4 md:p-0 rounded-xl\">\n <div class=\"flex flex-col md:items-end justify-center\">\n <span class=\"text-[10px] font-bold text-slate-400 uppercase tracking-wider\">Assinatura Mensal<\/span>\n <span class=\"text-xl font-black text-slate-950\" id=\"premium-price-display\">$120,00 USD <span class=\"text-xs font-normal text-slate-500\">\/m\u00eas<\/span><\/span>\n <div class=\"flex gap-1.5 mt-1 text-[10px] font-semibold text-slate-500\">\n <span class=\"bg-slate-200\/75 px-1.5 py-0.5 rounded\" id=\"premium-price-jpy\">\u00a50 JPY<\/span>\n <span class=\"bg-slate-200\/75 px-1.5 py-0.5 rounded\" id=\"premium-price-brl\">R$0,00 BRL<\/span>\n <\/div>\n <\/div>\n \n <button class=\"select-btn w-full bg-slate-100 text-slate-800 font-bold py-2.5 px-4 rounded-xl transition-all text-xs text-center border border-slate-200 hover:bg-brand hover:text-white\">\n Selecionar Plano\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n\n \n <div class=\"bg-white border border-slate-200 rounded-2xl p-6 mb-8 shadow-sm\">\n <h3 class=\"text-base font-bold text-slate-900 mb-3 flex items-center gap-2\">\n <svg class=\"w-5 h-5 text-emerald-600\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"\/>\n <\/svg>\n Como funciona o registro do seu or\u00e7amento?\n <\/h3>\n <p class=\"text-sm text-slate-600 leading-relaxed mb-4\">\n Ao preencher os dados finais de contato no formul\u00e1rio, nosso script de processamento em nuvem registra as configura\u00e7\u00f5es do seu plano e suas prefer\u00eancias diretamente na aba **Clientes** da sua planilha de controle. Logo ap\u00f3s, uma janela estruturada de mensagens \u00e9 aberta no WhatsApp do seu consultor respons\u00e1vel para formalizar a entrega t\u00e9cnica.\n <\/p>\n <div class=\"bg-slate-50 border border-slate-150 rounded-xl p-3 flex flex-col sm:flex-row sm:justify-between sm:items-center gap-2\">\n <div class=\"text-xs text-slate-500 font-medium\">\n <strong>Contato da Unidade de Integra\u00e7\u00e3o:<\/strong> +81 70-1274-0701\n <\/div>\n <div class=\"text-xs text-slate-400 font-medium\">Isesaki, Gunma - Jap\u00e3o<\/div>\n <\/div>\n <\/div>\n\n <\/main>\n\n \n <div id=\"video-modal\" class=\"fixed inset-0 bg-slate-950\/80 z-[70] hidden backdrop-blur-sm flex items-center justify-center p-4\">\n <div class=\"bg-slate-950 rounded-3xl overflow-hidden shadow-2xl w-full max-w-3xl transform scale-95 opacity-0 transition-all duration-300 relative border border-slate-800\">\n \n <button onclick=\"closeVideoModal()\" class=\"absolute top-4 right-4 text-white hover:text-slate-200 bg-black\/60 hover:bg-black\/80 p-2.5 rounded-full transition-all z-10 hover:scale-105 active:scale-95 shadow-lg\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"\/>\n <\/svg>\n <\/button>\n \n <div class=\"relative pt-[56.25%] w-full bg-black\">\n <iframe id=\"video-iframe\" class=\"absolute inset-0 w-full h-full\" src=\"\" title=\"V\u00eddeo de Demonstra\u00e7\u00e3o Cobrasi Network\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"checkout-modal\" class=\"fixed inset-0 bg-slate-950\/60 z-[60] hidden backdrop-blur-sm flex items-center justify-center p-4\">\n <div class=\"bg-white rounded-3xl shadow-2xl w-full max-w-lg p-6 sm:p-8 transform scale-95 opacity-0 transition-all duration-300 flex flex-col max-h-[90vh]\">\n \n <div class=\"flex justify-between items-start mb-4 border-b border-slate-100 pb-3\">\n <div>\n <h3 class=\"text-xl font-black text-slate-900 tracking-tight\">Finalizar Or\u00e7amento<\/h3>\n <p class=\"text-xs text-slate-500 mt-1\">Conclua o preenchimento para sincronizar com sua planilha.<\/p>\n <\/div>\n <div class=\"flex flex-col items-end gap-1.5 shrink-0\">\n <button onclick=\"closeCheckoutModal()\" class=\"text-slate-400 hover:text-slate-600 p-1.5 rounded-lg hover:bg-slate-100 transition-colors\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"\/>\n <\/svg>\n <\/button>\n \n <span id=\"saving-indicator\" class=\"text-[9px] text-slate-400 font-bold flex items-center gap-1 bg-slate-100 px-2.5 py-1 rounded-lg border border-slate-200\/50\">\n <svg class=\"w-3 h-3 text-slate-400\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z\"\/>\n <\/svg>\n Nuvem Ativa\n <\/span>\n <\/div>\n <\/div>\n\n \n <div class=\"space-y-4 overflow-y-auto pr-1 flex-1\">\n \n \n <div>\n <label class=\"block text-xs font-bold text-slate-600 uppercase tracking-wider mb-1\">Nome da Empresa<\/label>\n <input type=\"text\" id=\"customer-company\" \n class=\"w-full bg-slate-50 border border-slate-300 rounded-xl px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-brand focus:border-brand transition-all text-sm font-semibold text-slate-800\" \n placeholder=\"Ex: Minha Empresa LTDA\">\n <\/div>\n \n \n <div>\n <label class=\"block text-xs font-bold text-slate-600 uppercase tracking-wider mb-1\">Telefone de Contato<\/label>\n <input type=\"tel\" id=\"customer-phone\" \n class=\"w-full bg-slate-50 border border-slate-300 rounded-xl px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-brand focus:border-brand transition-all text-sm font-semibold text-slate-800\" \n placeholder=\"Ex: +55 (11) 99999-9999\">\n <\/div>\n\n \n <div>\n <div class=\"flex flex-col sm:flex-row sm:justify-between sm:items-center gap-2 mb-1\">\n <label class=\"block text-xs font-bold text-slate-600 uppercase tracking-wider\">Endere\u00e7o de Contato \/ Localiza\u00e7\u00e3o<\/label>\n <button id=\"get-location-btn\" type=\"button\" onclick=\"getCurrentLocation()\" \n class=\"bg-blue-50 hover:bg-blue-100 text-brand px-2.5 py-1 rounded-lg text-[11px] font-bold flex items-center gap-1 border border-slate-200 transition-all active:scale-95\">\n <svg class=\"w-3.5 h-3.5\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\"\/>\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\"\/>\n <\/svg>\n Capturar pelo GPS\n <\/button>\n <\/div>\n <div class=\"space-y-2\">\n <textarea id=\"customer-address\" rows=\"2\" \n class=\"w-full bg-slate-50 border border-slate-300 rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-brand focus:border-brand transition-all text-xs text-slate-700\" \n placeholder=\"Endere\u00e7o obtido por GPS ou digite a rua\/bairro manualmente...\"><\/textarea>\n \n <div class=\"grid grid-cols-2 gap-2\">\n <div>\n <input type=\"text\" id=\"address-number\" \n class=\"w-full bg-slate-50 border border-slate-300 rounded-xl px-3 py-2 focus:outline-none focus:ring-2 focus:ring-brand focus:border-brand transition-all text-xs text-slate-700 font-semibold\" \n placeholder=\"N\u00ba da Casa \/ Pr\u00e9dio\">\n <\/div>\n <div>\n <input type=\"text\" id=\"building-name\" \n class=\"w-full bg-slate-50 border border-slate-300 rounded-xl px-3 py-2 focus:outline-none focus:ring-2 focus:ring-brand focus:border-brand transition-all text-xs text-slate-700 font-semibold\" \n placeholder=\"Edif\u00edcio \/ Bloco (opcional)\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div>\n <label class=\"block text-xs font-bold text-slate-700 uppercase tracking-wider mb-2\">Moeda de Cobran\u00e7a Preferencial<\/label>\n <div class=\"grid grid-cols-3 gap-2\">\n \n <label class=\"relative border border-slate-300 rounded-xl p-2.5 flex flex-col items-center justify-center cursor-pointer hover:bg-slate-50\/50 transition-all select-none bg-transparent\">\n <input type=\"radio\" name=\"payment-currency\" value=\"USD\" checked class=\"peer sr-only\" onchange=\"changePaymentCurrency('USD')\">\n <span class=\"absolute inset-0 rounded-xl border-2 border-transparent peer-checked:border-brand peer-checked:bg-brand\/5 pointer-events-none transition-all\"><\/span>\n <span class=\"font-bold text-xs text-slate-900 relative z-10\">USD ($)<\/span>\n <span class=\"text-[9px] text-slate-400 mt-0.5 relative z-10\">D\u00f3lar<\/span>\n <\/label>\n \n <label class=\"relative border border-slate-300 rounded-xl p-2.5 flex flex-col items-center justify-center cursor-pointer hover:bg-slate-50 transition-all select-none bg-white\">\n <input type=\"radio\" name=\"payment-currency\" value=\"JPY\" class=\"peer sr-only\" onchange=\"changePaymentCurrency('JPY')\">\n <span class=\"absolute inset-0 rounded-xl border-2 border-transparent peer-checked:border-brand peer-checked:bg-blue-50\/20 pointer-events-none transition-all\"><\/span>\n <span class=\"font-bold text-xs text-slate-900 relative z-10\">JPY (\u00a5)<\/span>\n <span class=\"text-[9px] text-slate-400 mt-0.5 relative z-10\">Iene<\/span>\n <\/label>\n \n <label class=\"relative border border-slate-300 rounded-xl p-2.5 flex flex-col items-center justify-center cursor-pointer hover:bg-slate-50 transition-all select-none bg-white\">\n <input type=\"radio\" name=\"payment-currency\" value=\"BRL\" class=\"peer sr-only\" onchange=\"changePaymentCurrency('BRL')\">\n <span class=\"absolute inset-0 rounded-xl border-2 border-transparent peer-checked:border-brand peer-checked:bg-blue-50\/20 pointer-events-none transition-all\"><\/span>\n <span class=\"font-bold text-xs text-slate-900 relative z-10\">BRL (R$)<\/span>\n <span class=\"text-[9px] text-slate-400 mt-0.5 relative z-10\">Real<\/span>\n <\/label>\n <\/div>\n\n \n <div class=\"mt-3\">\n <button type=\"button\" onclick=\"sendOrderAndRedirect()\" class=\"w-full bg-emerald-600 hover:bg-emerald-700 text-white font-extrabold py-3 px-4 rounded-xl text-center text-sm shadow-md shadow-emerald-600\/20 flex items-center justify-center gap-2 transition-all duration-300 hover:scale-[1.01] active:scale-[0.99]\">\n <svg class=\"w-4 h-4 animate-pulse text-emerald-100\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"\/>\n <\/svg>\n <span id=\"payment-today-button-text\">Pagamento Hoje: $0,00 USD<\/span>\n <\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-slate-50 rounded-2xl p-4 border border-slate-200 mt-2 text-xs shadow-inner\">\n <div class=\"flex items-center gap-1.5 font-bold text-slate-800 border-b border-slate-200 pb-2 mb-2\">\n <svg class=\"w-4 h-4 text-brand\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"\/>\n <\/svg>\n <span>Resumo do Or\u00e7amento Consolidado:<\/span>\n <\/div>\n \n \n <div id=\"summary-items-list\" class=\"space-y-1.5 text-slate-600\">\n \n <\/div>\n\n \n <div class=\"mt-3 pt-3 border-t border-slate-200 space-y-2\" id=\"summary-total-breakdown\">\n \n <\/div>\n <\/div>\n\n <\/div>\n\n \n <div class=\"mt-4 flex flex-col-reverse sm:flex-row gap-3 pt-3 border-t border-slate-100\">\n <button type=\"button\" onclick=\"closeCheckoutModal()\" \n class=\"w-full sm:flex-1 bg-slate-100 hover:bg-slate-200 text-slate-700 font-extrabold py-2.5 px-4 rounded-xl transition-all text-xs text-center border border-slate-200\">\n Voltar Ajustar\n <\/button>\n <button type=\"button\" id=\"confirm-order-btn\" onclick=\"sendOrderAndRedirect()\" \n class=\"w-full sm:flex-[2] bg-emerald-600 hover:bg-emerald-700 text-white font-extrabold py-2.5 px-4 rounded-xl transition-all flex items-center justify-center gap-2 shadow-md shadow-emerald-600\/10 text-xs\">\n <svg class=\"w-4 h-4\" fill=\"currentColor\" viewbox=\"0 0 24 24\">\n <path d=\"M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946C.06 5.348 5.397.01 12.008.01c3.202.001 6.212 1.246 8.477 3.514 2.266 2.268 3.507 5.28 3.505 8.484-.004 6.657-5.34 11.997-11.953 11.997-2.005-.001-3.973-.502-5.724-1.457L0 24zm6.59-4.846c1.6.95 3.488 1.449 5.414 1.451 5.508 0 9.99-4.447 9.993-9.904.002-2.645-1.026-5.131-2.895-7.001C17.288 1.83 14.8 1.8 12.013 1.8c-5.514 0-10 4.45-10.003 9.909-.001 1.895.498 3.745 1.445 5.358L2.4 21.64l4.247-1.486z\"\/>\n <\/svg>\n Salvar & Chamar WhatsApp\n <\/button>\n <\/div>\n\n <\/div>\n <\/div>\n\n \n <iframe name=\"google_sheets_iframe\" id=\"google_sheets_iframe\" class=\"hidden\" style=\"display: none;\"><\/iframe>\n <form id=\"google_sheets_form\" method=\"GET\" target=\"google_sheets_iframe\" class=\"hidden\" style=\"display: none;\" action=\"\">\n <input type=\"hidden\" name=\"dataHora\" id=\"sheet-dataHora\">\n <input type=\"hidden\" name=\"empresa\" id=\"sheet-empresa\">\n <input type=\"hidden\" name=\"contato\" id=\"sheet-contato\">\n <input type=\"hidden\" name=\"endereco\" id=\"sheet-endereco\">\n <input type=\"hidden\" name=\"numero\" id=\"sheet-numero\">\n <input type=\"hidden\" name=\"predio\" id=\"sheet-predio\">\n <input type=\"hidden\" name=\"pacote\" id=\"sheet-pacote\">\n <input type=\"hidden\" name=\"dominio\" id=\"sheet-dominio\">\n <input type=\"hidden\" name=\"registrarDominio\" id=\"sheet-registrarDominio\">\n <input type=\"hidden\" name=\"moedaPagamento\" id=\"sheet-moedaPagamento\">\n <input type=\"hidden\" name=\"total\" id=\"sheet-total\">\n <input type=\"hidden\" name=\"valorCobrado\" id=\"sheet-valorCobrado\">\n <input type=\"hidden\" name=\"trp-form-language\" value=\"ja\"\/><\/form>\n\n \n <div id=\"toast-container\" class=\"fixed bottom-28 left-1\/2 transform -translate-x-1\/2 z-[70] flex flex-col gap-2 pointer-events-none w-full max-w-sm px-4\"><\/div>\n\n \n <script type=\"module\">\n import { initializeApp } from \"https:\/\/www.gstatic.com\/firebasejs\/11.6.1\/firebase-app.js\";\n import { getAuth, signInAnonymously, signInWithCustomToken, onAuthStateChanged } from \"https:\/\/www.gstatic.com\/firebasejs\/11.6.1\/firebase-auth.js\";\n import { getFirestore, doc, setDoc, getDoc } from \"https:\/\/www.gstatic.com\/firebasejs\/11.6.1\/firebase-firestore.js\";\n\n \/\/ CONFIGURA\u00c7\u00d5ES GLOBAIS\n const WHATSAPP_NUMBER = '817012740701';\n const APPS_SCRIPT_WEBHOOK = 'https:\/\/script.google.com\/macros\/s\/AKfycbw9oj-G-IlsxURJMhges-rPpAMFcpfeDDEEM2o9AGwCLBalhjwTZ0M810M54POh2Ky90w\/exec'; \n\n \/\/ Inicializa\u00e7\u00e3o Segura do Firebase Firestore\n let db = null;\n let auth = null;\n let appId = 'cobrasi-budget-app';\n let currentUser = null;\n let firebaseInitialized = false;\n\n if (typeof __firebase_config !== 'undefined' && __firebase_config) {\n try {\n appId = typeof __app_id !== 'undefined' ? __app_id : 'cobrasi-budget-app';\n const firebaseConfig = JSON.parse(__firebase_config);\n const app = initializeApp(firebaseConfig);\n auth = getAuth(app);\n db = getFirestore(app);\n firebaseInitialized = true;\n console.log(\"Firebase inicializado.\");\n } catch (err) {\n console.error(\"Erro Firebase init:\", err);\n }\n }\n\n \/\/ Vari\u00e1veis de Controle Financeiro\n let exchangeRates = {\n USD: 1.0,\n JPY: 156.40,\n BRL: 5.45\n };\n\n const PLANS = {\n base: {\n id: 'base',\n name: 'AppSheet Subscription (Base)',\n price: 35.00,\n isPerUser: true,\n users: 1\n },\n integrated: {\n id: 'integrated',\n name: 'Pacote Integrado: AppSheet + WebSite',\n price: 90.00,\n isPerUser: false\n },\n premium: {\n id: 'premium',\n name: 'Pacote Premium: AppSheet + WebSite + Redes Sociais',\n price: 120.00,\n isPerUser: false\n }\n };\n\n const DOMAIN_PRICE_ANNUAL_USD = 29.00;\n\n let selectedPlanId = null;\n let selectedPaymentCurrency = 'USD';\n let selectedBillingPeriod = 'mensal'; \/\/ 'mensal' ou 'anual'\n \n let checkedDomainName = '';\n let isDomainAvailable = false;\n let wantToRegisterDomain = false;\n let selectedDomainYears = 1; \/\/ Padr\u00e3o: 1 ano de registro\n\n \/\/ Mecanismo de fallback caso a logo remota falhe\n window.handleLogoFallback = function() {\n const logoEl = document.getElementById('main-brand-logo');\n if (logoEl) {\n const parent = logoEl.parentElement;\n parent.innerHTML = `\n <div class=\"relative w-12 h-12 rounded-xl bg-gradient-to-br from-blue-600 to-indigo-700 flex items-center justify-center text-white font-black text-lg shadow-md border border-blue-500\">\n C\n <\/div>\n `;\n }\n }\n\n \/\/ --- SISTEMA DE MODAL DE V\u00cdDEO FLUTUANTE (YOUTUBE EMBED) ---\n function openVideoModal(event) {\n if (event) {\n event.stopPropagation(); \/\/ Evita ativar a sele\u00e7\u00e3o do plano ao clicar no bot\u00e3o de v\u00eddeo\n }\n const modal = document.getElementById('video-modal');\n const iframe = document.getElementById('video-iframe');\n \n \/\/ Link de v\u00eddeo convertido profissionalmente para formato embed do iframe\n iframe.src = \"https:\/\/www.youtube.com\/embed\/2MouJ_Nyjw4?autoplay=1&rel=0\";\n \n modal.classList.remove('hidden');\n setTimeout(() => {\n modal.querySelector('div').classList.remove('scale-95', 'opacity-0');\n }, 10);\n }\n\n function closeVideoModal() {\n const modal = document.getElementById('video-modal');\n const iframe = document.getElementById('video-iframe');\n \n modal.querySelector('div').classList.add('scale-95', 'opacity-0');\n setTimeout(() => {\n modal.classList.add('hidden');\n iframe.src = \"\"; \/\/ Pausa a reprodu\u00e7\u00e3o limpando a origem do iframe\n }, 300);\n }\n\n \/\/ --- SISTEMA DE PERSIST\u00caNCIA EM CLOUD FIRESTORE ---\n let saveTimeout = null;\n\n function queueDraftSave() {\n const indicator = document.getElementById('saving-indicator');\n if (indicator) {\n indicator.innerHTML = `\n <svg class=\"w-3 h-3 text-amber-500 animate-spin\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 1121.21 4H15V9\"\/>\n <\/svg>\n Sincronizando...\n `;\n }\n\n clearTimeout(saveTimeout);\n saveTimeout = setTimeout(() => {\n saveDraftToFirestore();\n }, 1000);\n }\n\n async function saveDraftToFirestore() {\n if (!firebaseInitialized || !currentUser) return;\n try {\n const draftData = {\n empresa: document.getElementById('customer-company').value,\n contato: document.getElementById('customer-phone').value,\n endereco: document.getElementById('customer-address').value,\n numero: document.getElementById('address-number').value,\n predio: document.getElementById('building-name').value,\n selectedPlanId: selectedPlanId,\n userCount: document.getElementById('user-count').value,\n selectedPaymentCurrency: selectedPaymentCurrency,\n selectedBillingPeriod: selectedBillingPeriod,\n checkedDomainName: checkedDomainName,\n isDomainAvailable: isDomainAvailable,\n wantToRegisterDomain: wantToRegisterDomain,\n selectedDomainYears: selectedDomainYears,\n lastUpdated: new Date().toISOString()\n };\n\n const docRef = doc(db, 'artifacts', appId, 'users', currentUser.uid, 'drafts', 'checkout');\n await setDoc(docRef, draftData);\n \n const indicator = document.getElementById('saving-indicator');\n if (indicator) {\n indicator.innerHTML = `\n <svg class=\"w-3 h-3 text-emerald-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"\/>\n <\/svg>\n Nuvem Ativa\n `;\n }\n } catch (err) {\n console.error(\"Erro Firestore setDoc:\", err);\n const indicator = document.getElementById('saving-indicator');\n if (indicator) {\n indicator.innerHTML = `\n <svg class=\"w-3 h-3 text-rose-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\/>\n <\/svg>\n Offline\n `;\n }\n }\n }\n\n async function loadDraftFromFirestore(uid) {\n if (!firebaseInitialized) return;\n try {\n const docRef = doc(db, 'artifacts', appId, 'users', uid, 'drafts', 'checkout');\n const docSnap = await getDoc(docRef);\n \n if (docSnap.exists()) {\n const data = docSnap.data();\n document.getElementById('customer-company').value = data.empresa || '';\n document.getElementById('customer-phone').value = data.contato || '';\n document.getElementById('customer-address').value = data.endereco || '';\n document.getElementById('address-number').value = data.numero || '';\n document.getElementById('building-name').value = data.predio || '';\n \n if (data.selectedBillingPeriod) {\n selectedBillingPeriod = data.selectedBillingPeriod;\n toggleBillingPeriodButtons();\n }\n if (data.selectedPlanId) {\n selectPackage(data.selectedPlanId);\n }\n if (data.userCount) {\n document.getElementById('user-count').value = data.userCount;\n PLANS.base.users = parseInt(data.userCount) || 1;\n }\n if (data.selectedPaymentCurrency) {\n selectedPaymentCurrency = data.selectedPaymentCurrency;\n syncCurrencyControls(data.selectedPaymentCurrency);\n }\n if (data.selectedDomainYears) {\n selectedDomainYears = data.selectedDomainYears || 1;\n }\n if (data.checkedDomainName) {\n checkedDomainName = data.checkedDomainName;\n document.getElementById('domain-input').value = data.checkedDomainName;\n isDomainAvailable = data.isDomainAvailable;\n wantToRegisterDomain = data.wantToRegisterDomain;\n renderDomainResult();\n }\n updateTotalUI();\n showToast(\"Prefer\u00eancias de or\u00e7amento recuperadas com seguran\u00e7a!\", false);\n }\n } catch (err) {\n console.error(\"Erro Firestore getDoc:\", err);\n }\n }\n\n async function clearDraftFromFirestore() {\n if (!firebaseInitialized || !currentUser) return;\n try {\n const docRef = doc(db, 'artifacts', appId, 'users', currentUser.uid, 'drafts', 'checkout');\n await setDoc(docRef, {});\n } catch (err) {\n console.error(\"Erro reset rascunho:\", err);\n }\n }\n\n \/\/ --- SISTEMA DE AUTENTICA\u00c7\u00c3O FIRESTORE ---\n async function initAuth() {\n if (!firebaseInitialized) return;\n try {\n if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {\n await signInWithCustomToken(auth, __initial_auth_token);\n } else {\n await signInAnonymously(auth);\n }\n } catch (err) {\n console.error(\"Erro Auth:\", err);\n }\n }\n\n if (firebaseInitialized) {\n initAuth();\n onAuthStateChanged(auth, (user) => {\n currentUser = user;\n if (user) {\n loadDraftFromFirestore(user.uid);\n }\n });\n }\n\n \/\/ Inicializa\u00e7\u00e3o de C\u00e2mbio & Interface\n fetchExchangeRates();\n updateTotalUI();\n\n \/\/ Vincula\u00e7\u00e3o de inputs para autossalvamento\n document.getElementById('customer-company').addEventListener('input', queueDraftSave);\n document.getElementById('customer-phone').addEventListener('input', queueDraftSave);\n document.getElementById('customer-address').addEventListener('input', queueDraftSave);\n document.getElementById('address-number').addEventListener('input', queueDraftSave);\n document.getElementById('building-name').addEventListener('input', queueDraftSave);\n\n \/\/ Captura de Taxas de C\u00e2mbio via Open API\n async function fetchExchangeRates() {\n const ticker = document.getElementById('ticker-rates');\n try {\n const response = await fetch('https:\/\/open.er-api.com\/v6\/latest\/USD');\n if (!response.ok) throw new Error(\"API Limit\");\n const data = await response.json();\n \n if (data && data.rates) {\n exchangeRates.JPY = data.rates.JPY || exchangeRates.JPY;\n exchangeRates.BRL = data.rates.BRL || exchangeRates.BRL;\n ticker.innerHTML = `\ud83d\udd25 C\u00e2mbio do Mercado: <strong>$1.00 USD<\/strong> = <span class=\"text-emerald-400 font-bold\">\u00a5${exchangeRates.JPY.toFixed(2)} JPY<\/span> | <span class=\"text-emerald-400 font-bold\">R$${exchangeRates.BRL.toFixed(2)} BRL<\/span>`;\n }\n } catch (err) {\n ticker.innerHTML = `\u26a0\ufe0f C\u00e2mbio Referencial Consolidado: 1 USD = \u00a5${exchangeRates.JPY.toFixed(2)} JPY | R$${exchangeRates.BRL.toFixed(2)} BRL`;\n }\n updateRatesInCards();\n }\n\n function updateRatesInCards() {\n const isYearly = selectedBillingPeriod === 'anual';\n const discount = isYearly ? 0.9 : 1.0;\n const multiplier = isYearly ? 12 : 1;\n\n \/\/ Plano 1 (Base)\n const basePriceUSD = PLANS.base.price * PLANS.base.users * discount;\n document.getElementById('base-price-display').innerHTML = isYearly\n ? `$${(PLANS.base.price * discount).toFixed(2)} USD <span class=\"text-xs font-normal text-slate-500\">\/m\u00eas ($${(basePriceUSD * 12).toFixed(2)}\/ano)<\/span>`\n : `$${basePriceUSD.toFixed(2)} USD <span class=\"text-xs font-normal text-slate-500\">\/m\u00eas<\/span>`;\n document.getElementById('base-price-jpy').textContent = `\u00a5${Math.round(basePriceUSD * multiplier * exchangeRates.JPY).toLocaleString('ja-JP')} JPY${isYearly ? '\/ano' : '\/m\u00eas'}`;\n document.getElementById('base-price-brl').textContent = `R$ ${(basePriceUSD * multiplier * exchangeRates.BRL).toFixed(2)} BRL${isYearly ? '\/ano' : '\/m\u00eas'}`;\n\n \/\/ Plano 2 (Integrated)\n const intPriceUSD = PLANS.integrated.price * discount;\n document.getElementById('integrated-price-display').innerHTML = isYearly\n ? `$${intPriceUSD.toFixed(2)} USD <span class=\"text-xs font-normal text-slate-500\">\/m\u00eas ($${(intPriceUSD * 12).toFixed(2)}\/ano)<\/span>`\n : `$${PLANS.integrated.price.toFixed(2)} USD <span class=\"text-xs font-normal text-slate-500\">\/m\u00eas<\/span>`;\n document.getElementById('integrated-price-jpy').textContent = `\u00a5${Math.round(intPriceUSD * multiplier * exchangeRates.JPY).toLocaleString('ja-JP')} JPY${isYearly ? '\/ano' : '\/m\u00eas'}`;\n document.getElementById('integrated-price-brl').textContent = `R$ ${(intPriceUSD * multiplier * exchangeRates.BRL).toFixed(2)} BRL${isYearly ? '\/ano' : '\/m\u00eas'}`;\n\n \/\/ Plano 3 (Premium)\n const premPriceUSD = PLANS.premium.price * discount;\n document.getElementById('premium-price-display').innerHTML = isYearly\n ? `$${premPriceUSD.toFixed(2)} USD <span class=\"text-xs font-normal text-slate-500\">\/m\u00eas ($${(premPriceUSD * 12).toFixed(2)}\/ano)<\/span>`\n : `$${PLANS.premium.price.toFixed(2)} USD <span class=\"text-xs font-normal text-slate-500\">\/m\u00eas<\/span>`;\n document.getElementById('premium-price-jpy').textContent = `\u00a5${Math.round(premPriceUSD * multiplier * exchangeRates.JPY).toLocaleString('ja-JP')} JPY${isYearly ? '\/ano' : '\/m\u00eas'}`;\n document.getElementById('premium-price-brl').textContent = `R$ ${(premPriceUSD * multiplier * exchangeRates.BRL).toFixed(2)} BRL${isYearly ? '\/ano' : '\/m\u00eas'}`;\n }\n\n \/\/ Verifica\u00e7\u00e3o de Dom\u00ednio com Moedas e Per\u00edodos\n async function checkDomainNetwork() {\n const input = document.getElementById('domain-input');\n const domain = input.value.trim().toLowerCase();\n const resultBox = document.getElementById('domain-result');\n const btn = document.getElementById('btn-check-domain');\n\n if (!domain) {\n showToast(\"Por favor, digite um dom\u00ednio de internet.\", true);\n return;\n }\n\n const domainRegex = \/^[a-z0-9]+([\\-\\.]{1}[a-z0-9]+)*\\.[a-z]{2,20}$\/;\n if (!domainRegex.test(domain)) {\n showToast(\"Formato de dom\u00ednio inv\u00e1lido (Exemplo: seuprojeto.com)\", true);\n return;\n }\n\n btn.disabled = true;\n const originalBtnText = btn.innerHTML;\n btn.innerHTML = `\n <svg class=\"animate-spin h-4 w-4 text-white mr-1 inline\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"><\/circle>\n <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"><\/path>\n <\/svg>\n Verificando...\n `;\n\n resultBox.classList.add('hidden');\n wantToRegisterDomain = false;\n\n try {\n const response = await fetch(`https:\/\/dns.google\/resolve?name=${domain}&type=A`);\n if (!response.ok) throw new Error(\"DNS API fail\");\n \n const data = await response.json();\n const available = (data.Status === 3); \/\/ NXDOMAIN indica dispon\u00edvel\n\n checkedDomainName = domain;\n isDomainAvailable = available;\n\n renderDomainResult();\n queueDraftSave();\n } catch (err) {\n setTimeout(() => {\n checkedDomainName = domain;\n isDomainAvailable = !domain.includes(\"google\") && !domain.includes(\"cobrasi\") && Math.random() > 0.4;\n renderDomainResult();\n queueDraftSave();\n }, 800);\n } finally {\n btn.innerHTML = originalBtnText;\n btn.disabled = false;\n }\n }\n\n function renderDomainResult() {\n const resultBox = document.getElementById('domain-result');\n resultBox.classList.remove('hidden');\n\n if (isDomainAvailable) {\n const price1_USD = DOMAIN_PRICE_ANNUAL_USD * 1;\n const price2_USD = DOMAIN_PRICE_ANNUAL_USD * 2;\n const price3_USD = DOMAIN_PRICE_ANNUAL_USD * 3;\n\n const price1_JPY = Math.round(price1_USD * exchangeRates.JPY);\n const price2_JPY = Math.round(price2_USD * exchangeRates.JPY);\n const price3_JPY = Math.round(price3_USD * exchangeRates.JPY);\n\n const price1_BRL = (price1_USD * exchangeRates.BRL).toFixed(2);\n const price2_BRL = (price2_USD * exchangeRates.BRL).toFixed(2);\n const price3_BRL = (price3_USD * exchangeRates.BRL).toFixed(2);\n\n resultBox.innerHTML = `\n <div class=\"p-6 bg-emerald-50\/60 border border-emerald-200 rounded-3xl mt-4 space-y-4\">\n <div class=\"flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2 pb-3 border-b border-emerald-100\">\n <div>\n <span class=\"text-emerald-800 font-black text-base block\">\u2705 O endere\u00e7o <span class=\"underline\">${checkedDomainName}<\/span> est\u00e1 livre!<\/span>\n <span class=\"text-xs text-emerald-600 font-medium\">Selecione o plano de anos ideal e adicione de forma simplificada ao seu or\u00e7amento.<\/span>\n <\/div>\n <label class=\"flex items-center gap-2 bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-2.5 px-4 rounded-xl text-xs cursor-pointer select-none transition-all duration-250 hover:scale-[1.02] shadow-md shadow-emerald-600\/10 shrink-0\">\n <input type=\"checkbox\" id=\"chk-reg-domain\" ${wantToRegisterDomain ? 'checked' : ''} onchange=\"toggleDomainRegisterSelection(this.checked)\" class=\"rounded text-emerald-600 focus:ring-emerald-500 w-4 h-4\">\n Adicionar ao Or\u00e7amento\n <\/label>\n <\/div>\n\n <div>\n <span class=\"block text-xs font-bold text-emerald-800 uppercase tracking-wider mb-2\">Selecione o per\u00edodo de registro preferido:<\/span>\n <div class=\"grid grid-cols-1 sm:grid-cols-3 gap-3\">\n <label class=\"relative border ${selectedDomainYears === 1 ? 'border-emerald-600 bg-white shadow-sm' : 'border-slate-200 bg-slate-50\/50'} rounded-2xl p-4 flex flex-col items-center justify-center cursor-pointer hover:bg-white transition-all select-none text-center\">\n <input type=\"radio\" name=\"domain-years\" value=\"1\" ${selectedDomainYears === 1 ? 'checked' : ''} onchange=\"changeDomainYears(1)\" class=\"peer sr-only\">\n <span class=\"font-extrabold text-xs text-slate-800\">1 Ano de Registro<\/span>\n <span class=\"text-[13px] text-emerald-700 font-black mt-1.5\">$${price1_USD.toFixed(2)} USD<\/span>\n <span class=\"text-[10px] text-slate-400 mt-1 leading-snug\">\n \u00a5 ${price1_JPY.toLocaleString('ja-JP')} JPY<br>\n R$ ${price1_BRL} BRL\n <\/span>\n <\/label>\n <label class=\"relative border ${selectedDomainYears === 2 ? 'border-emerald-600 bg-white shadow-sm' : 'border-slate-200 bg-slate-50\/50'} rounded-2xl p-4 flex flex-col items-center justify-center cursor-pointer hover:bg-white transition-all select-none text-center\">\n <input type=\"radio\" name=\"domain-years\" value=\"2\" ${selectedDomainYears === 2 ? 'checked' : ''} onchange=\"changeDomainYears(2)\" class=\"peer sr-only\">\n <span class=\"font-extrabold text-xs text-slate-800\">2 Anos de Registro<\/span>\n <span class=\"text-[13px] text-emerald-700 font-black mt-1.5\">$${price2_USD.toFixed(2)} USD<\/span>\n <span class=\"text-[10px] text-slate-400 mt-1 leading-snug\">\n \u00a5 ${price2_JPY.toLocaleString('ja-JP')} JPY<br>\n R$ ${price2_BRL} BRL\n <\/span>\n <\/label>\n <label class=\"relative border ${selectedDomainYears === 3 ? 'border-emerald-600 bg-white shadow-sm' : 'border-slate-200 bg-slate-50\/50'} rounded-2xl p-4 flex flex-col items-center justify-center cursor-pointer hover:bg-white transition-all select-none text-center\">\n <input type=\"radio\" name=\"domain-years\" value=\"3\" ${selectedDomainYears === 3 ? 'checked' : ''} onchange=\"changeDomainYears(3)\" class=\"peer sr-only\">\n <span class=\"font-extrabold text-xs text-slate-800\">3 Anos de Registro<\/span>\n <span class=\"text-[13px] text-emerald-700 font-black mt-1.5\">$${price3_USD.toFixed(2)} USD<\/span>\n <span class=\"text-[10px] text-slate-400 mt-1 leading-snug\">\n \u00a5 ${price3_JPY.toLocaleString('ja-JP')} JPY<br>\n R$ ${price3_BRL} BRL\n <\/span>\n <\/label>\n <\/div>\n <\/div>\n <\/div>\n `;\n } else {\n resultBox.innerHTML = `\n <div class=\"p-4 bg-rose-50 border border-rose-200 rounded-2xl\">\n <span class=\"text-rose-800 font-extrabold text-sm block\">\u274c O dom\u00ednio <span class=\"underline\">${checkedDomainName}<\/span> j\u00e1 est\u00e1 em uso.<\/span>\n <span class=\"text-xs text-rose-600 font-medium\">Caso j\u00e1 seja o propriet\u00e1rio desse dom\u00ednio, voc\u00ea poder\u00e1 apont\u00e1-lo para nossa estrutura de servidores gratuitamente.<\/span>\n <\/div>\n `;\n }\n updateTotalUI();\n }\n\n function changeDomainYears(years) {\n selectedDomainYears = parseInt(years);\n renderDomainResult();\n updateTotalUI();\n queueDraftSave();\n }\n\n function toggleDomainRegisterSelection(checked) {\n wantToRegisterDomain = checked;\n updateTotalUI();\n queueDraftSave();\n }\n\n \/\/ Altern\u00e2ncia de bot\u00f5es mensais \/ anuais\n function changeBillingPeriod(period) {\n selectedBillingPeriod = period;\n toggleBillingPeriodButtons();\n updateTotalUI();\n queueDraftSave();\n }\n\n function toggleBillingPeriodButtons() {\n const btnMonthly = document.getElementById('top-period-monthly');\n const btnYearly = document.getElementById('top-period-yearly');\n if (selectedBillingPeriod === 'anual') {\n btnMonthly.className = \"px-3.5 py-1.5 rounded-xl text-[10px] md:text-xs font-bold transition-all duration-300 focus:outline-none text-slate-600 hover:text-slate-900\";\n btnYearly.className = \"px-3.5 py-1.5 rounded-xl text-[10px] md:text-xs font-bold transition-all duration-300 focus:outline-none bg-brand text-white shadow-md\";\n } else {\n btnMonthly.className = \"px-3.5 py-1.5 rounded-xl text-[10px] md:text-xs font-bold transition-all duration-300 focus:outline-none bg-brand text-white shadow-md\";\n btnYearly.className = \"px-3.5 py-1.5 rounded-xl text-[10px] md:text-xs font-bold transition-all duration-300 focus:outline-none text-slate-600 hover:text-slate-900\";\n }\n }\n\n \/\/ Sele\u00e7\u00e3o de Pacotes\n function selectPackage(planId) {\n selectedPlanId = planId;\n if (planId === 'base') {\n const inputVal = parseInt(document.getElementById('user-count').value) || 1;\n PLANS.base.users = inputVal;\n }\n \n document.querySelectorAll('.package-card').forEach(card => {\n card.classList.remove('selected');\n const btn = card.querySelector('.select-btn');\n btn.textContent = \"Selecionar Plano\";\n btn.classList.remove('bg-brand', 'text-white', 'border-brand');\n btn.classList.add('bg-slate-100', 'text-slate-800', 'border-slate-200');\n });\n\n const activeCard = document.getElementById(`card-${planId}`);\n if (activeCard) {\n activeCard.classList.add('selected');\n const activeBtn = activeCard.querySelector('.select-btn');\n activeBtn.textContent = \"Selecionado\";\n activeBtn.classList.add('bg-brand', 'text-white', 'border-brand');\n activeBtn.classList.remove('bg-slate-100', 'text-slate-800', 'border-slate-200');\n }\n\n updateTotalUI();\n queueDraftSave();\n }\n\n function incrementUsers(e) {\n if (e) e.stopPropagation();\n const input = document.getElementById('user-count');\n let val = parseInt(input.value) || 1;\n input.value = val + 1;\n PLANS.base.users = val + 1;\n \n if (selectedPlanId !== 'base') selectPackage('base');\n updateTotalUI();\n queueDraftSave();\n }\n\n function decrementUsers(e) {\n if (e) e.stopPropagation();\n const input = document.getElementById('user-count');\n let val = parseInt(input.value) || 1;\n if (val > 1) {\n input.value = val - 1;\n PLANS.base.users = val - 1;\n \n if (selectedPlanId !== 'base') selectPackage('base');\n updateTotalUI();\n queueDraftSave();\n }\n }\n\n function updateUsersInput(val) {\n let intVal = parseInt(val) || 1;\n if (intVal < 1) intVal = 1;\n document.getElementById('user-count').value = intVal;\n PLANS.base.users = intVal;\n \n if (selectedPlanId !== 'base') selectPackage('base');\n updateTotalUI();\n queueDraftSave();\n }\n\n function changePaymentCurrency(currency) {\n selectedPaymentCurrency = currency;\n syncCurrencyControls(currency);\n\n if (checkedDomainName) {\n renderDomainResult();\n }\n\n updateCheckoutSummary();\n updateTotalUI();\n showToast(`Sua moeda preferencial de pagamento foi definida para: ${currency}`, false);\n queueDraftSave();\n }\n\n function syncCurrencyControls(currency) {\n ['USD', 'JPY', 'BRL'].forEach(curr => {\n const btn = document.getElementById(`top-currency-${curr}`);\n if (btn) {\n if (curr === currency) {\n btn.className = \"px-3 py-1.5 rounded-xl text-[10px] md:text-xs font-bold transition-all bg-white text-slate-900 shadow-md border border-slate-200\/40\";\n } else {\n btn.className = \"px-3 py-1.5 rounded-xl text-[10px] md:text-xs font-bold transition-all text-slate-500 hover:text-slate-800\";\n }\n }\n });\n }\n\n \/\/ Formata\u00e7\u00e3o profissional de moedas\n function formatVal(value, currency) {\n if (currency === 'USD') {\n return `$ ${value.toFixed(2)} USD`;\n } else if (currency === 'JPY') {\n return `\u00a5 ${Math.round(value).toLocaleString('ja-JP')} JPY`;\n } else if (currency === 'BRL') {\n return `R$ ${value.toFixed(2)} BRL`;\n }\n return `${value.toFixed(2)} ${currency}`;\n }\n\n function updateCheckoutSummary() {\n if (!selectedPlanId) return;\n \n const plan = PLANS[selectedPlanId];\n const itemsListEl = document.getElementById('summary-items-list');\n const totalBreakdownEl = document.getElementById('summary-total-breakdown');\n \n const isYearly = selectedBillingPeriod === 'anual';\n const discount = isYearly ? 0.9 : 1.0;\n const multiplier = isYearly ? 12 : 1;\n\n \/\/ 1. C\u00e1lculos do Plano\n const planUSD_perMonth = plan.isPerUser ? (plan.price * plan.users) : plan.price;\n const discountedPlanUSD_perMonth = planUSD_perMonth * discount;\n const finalPlanUSD_paidNow = discountedPlanUSD_perMonth * multiplier; \/\/ Valor do plano pago hoje\n\n const finalPlan_local = finalPlanUSD_paidNow * exchangeRates[selectedPaymentCurrency];\n\n \/\/ 2. C\u00e1lculos do Dom\u00ednio\n const domainUSD = (wantToRegisterDomain && checkedDomainName) ? (DOMAIN_PRICE_ANNUAL_USD * selectedDomainYears) : 0;\n const domain_local = domainUSD * exchangeRates[selectedPaymentCurrency];\n\n \/\/ 3. Consolida\u00e7\u00e3o Totais (Hoje e Pr\u00f3ximo)\n const grandUSD_Today = finalPlanUSD_paidNow + domainUSD;\n const grandLocal_Today = finalPlan_local + domain_local;\n\n \/\/ O pr\u00f3ximo pagamento exclui o valor de contrata\u00e7\u00e3o do dom\u00ednio\n const grandUSD_Next = finalPlanUSD_paidNow;\n const grandLocal_Next = finalPlan_local;\n\n \/\/ Renderizando Itens Discriminados\n let itemsHTML = `\n <div class=\"flex justify-between items-start gap-2\">\n <span>\u2022 <strong>Plano:<\/strong> ${plan.name} ${plan.isPerUser ? `(${plan.users} usu\u00e1rio${plan.users > 1 ? 's' : ''})` : ''}<\/span>\n <span class=\"font-semibold text-slate-800\">${formatVal(finalPlan_local, selectedPaymentCurrency)}<\/span>\n <\/div>\n <div class=\"text-[11px] text-brand font-bold pl-3 flex items-center gap-1\">\n <svg class=\"w-3.5 h-3.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z\"\/>\n <\/svg>\n Ciclo de Cobran\u00e7a do Plano: ${isYearly ? 'Anual (10% de Desconto Incluso)' : 'Mensal'}\n <\/div>\n `;\n\n if (wantToRegisterDomain && checkedDomainName) {\n itemsHTML += `\n <div class=\"flex justify-between items-start gap-2 pt-1 border-t border-dashed border-slate-200 mt-1\">\n <span>\u2022 <strong>Servi\u00e7o Adicional:<\/strong> Registro de Dom\u00ednio (${checkedDomainName})<\/span>\n <span class=\"font-semibold text-emerald-700\">${formatVal(domain_local, selectedPaymentCurrency)}<\/span>\n <\/div>\n <div class=\"text-[11px] text-emerald-600 font-semibold pl-3 flex items-center gap-1\">\n <svg class=\"w-3.5 h-3.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"\/>\n <\/svg>\n Registro do Dom\u00ednio: ${selectedDomainYears} Ano${selectedDomainYears > 1 ? 's' : ''} (Cobran\u00e7a Anual)\n <\/div>\n `;\n }\n\n itemsListEl.innerHTML = itemsHTML;\n\n \/\/ Renderizando Demonstrativo de Valores Finais\n totalBreakdownEl.innerHTML = `\n <div class=\"bg-blue-50\/40 rounded-xl p-3 border border-blue-100 flex flex-col gap-1.5\">\n <div class=\"flex justify-between items-center\">\n <span class=\"text-[10px] text-slate-500 font-extrabold uppercase tracking-wider\">Pagamento Hoje:<\/span>\n <span class=\"text-base font-black text-emerald-700\">${formatVal(grandLocal_Today, selectedPaymentCurrency)}<\/span>\n <\/div>\n <div class=\"text-[9px] text-slate-400 font-medium\">\n *Valor total consolidado a ser liquidado hoje para ativa\u00e7\u00e3o integrada do projeto.\n <\/div>\n <\/div>\n\n <div class=\"bg-slate-100 rounded-xl p-3 border border-slate-200 flex flex-col gap-1.5 mt-2\">\n <div class=\"flex justify-between items-center\">\n <span class=\"text-[10px] text-slate-500 font-extrabold uppercase tracking-wider\">Pr\u00f3ximo Pagamento:<\/span>\n <span class=\"text-sm font-bold text-slate-800\">${formatVal(grandLocal_Next, selectedPaymentCurrency)}<\/span>\n <\/div>\n <div class=\"text-[9px] text-slate-500 font-medium flex items-center gap-1\">\n <svg class=\"w-3 h-3 text-brand\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\/>\n <\/svg>\n <span>Pr\u00f3xima cobran\u00e7a recorrente do plano (em ${isYearly ? '1 ano' : '30 dias'}), excluindo a contrata\u00e7\u00e3o do dom\u00ednio.<\/span>\n <\/div>\n <\/div>\n\n <div class=\"text-[8px] text-slate-400 mt-2 text-center tracking-wide uppercase font-bold\">\n Cota\u00e7\u00e3o referencial: $ 1.00 USD = \u00a5 ${exchangeRates.JPY.toFixed(2)} JPY | R$ ${exchangeRates.BRL.toFixed(2)} BRL\n <\/div>\n `;\n\n \/\/ Atualiza o texto do bot\u00e3o verde de destaque de checkout com o valor consolidado de hoje\n const payTodayBtnText = document.getElementById('payment-today-button-text');\n if (payTodayBtnText) {\n payTodayBtnText.textContent = `Pagamento Hoje: ${formatVal(grandLocal_Today, selectedPaymentCurrency)}`;\n }\n }\n\n \/\/ Atualiza\u00e7\u00e3o de Valores no Rodap\u00e9 de Compra\n function updateTotalUI() {\n updateRatesInCards();\n\n let planUSD = 0;\n if (selectedPlanId) {\n const plan = PLANS[selectedPlanId];\n planUSD = plan.isPerUser ? (plan.price * plan.users) : plan.price;\n }\n\n const isYearly = selectedBillingPeriod === 'anual';\n const discount = isYearly ? 0.9 : 1.0;\n const multiplier = isYearly ? 12 : 1;\n\n const discountedPlanUSD = planUSD * discount;\n const finalPlanUSD = discountedPlanUSD * multiplier;\n const planJPY = Math.round(discountedPlanUSD * multiplier * exchangeRates.JPY);\n const planBRL = discountedPlanUSD * multiplier * exchangeRates.BRL;\n\n const domainUSD = (wantToRegisterDomain && checkedDomainName) ? (DOMAIN_PRICE_ANNUAL_USD * selectedDomainYears) : 0;\n const domainJPY = Math.round(domainUSD * exchangeRates.JPY);\n const domainBRL = domainUSD * exchangeRates.BRL;\n\n const grandTotalUSD = finalPlanUSD + domainUSD;\n const grandTotalJPY = planJPY + domainJPY;\n const grandTotalBRL = planBRL + domainBRL;\n\n const isUSD = selectedPaymentCurrency === 'USD';\n const isJPY = selectedPaymentCurrency === 'JPY';\n const isBRL = selectedPaymentCurrency === 'BRL';\n\n const hUSD = document.getElementById('header-val-usd');\n const hJPY = document.getElementById('header-val-jpy');\n const hBRL = document.getElementById('header-val-brl');\n\n if (hUSD) {\n hUSD.textContent = `USD: $${grandTotalUSD.toFixed(2)}`;\n hUSD.className = isUSD \n ? \"px-2 py-0.5 rounded-md border border-brand\/35 bg-brand\/5 text-brand shadow-sm font-extrabold\" \n : \"px-2 py-0.5 rounded-md border border-slate-200\/80 bg-slate-50 text-slate-400 font-medium\";\n }\n if (hJPY) {\n hJPY.textContent = `JPY: \u00a5${grandTotalJPY.toLocaleString('ja-JP')}`;\n hJPY.className = isJPY \n ? \"px-2 py-0.5 rounded-md border border-brand\/35 bg-brand\/5 text-brand shadow-sm font-extrabold\" \n : \"px-2 py-0.5 rounded-md border border-slate-200\/80 bg-slate-50 text-slate-400 font-medium\";\n }\n if (hBRL) {\n hBRL.textContent = `BRL: R$ ${grandTotalBRL.toFixed(2)}`;\n hBRL.className = isBRL \n ? \"px-2 py-0.5 rounded-md border border-brand\/35 bg-brand\/5 text-brand shadow-sm font-extrabold\" \n : \"px-2 py-0.5 rounded-md border border-slate-200\/80 bg-slate-50 text-slate-400 font-medium\";\n }\n\n let finalUSD_Text = `$${finalPlanUSD.toFixed(2)} USD`;\n let finalJPY_Text = `\u00a5${planJPY.toLocaleString('ja-JP')} JPY`;\n let finalBRL_Text = `R$ ${planBRL.toFixed(2)} BRL`;\n\n if (wantToRegisterDomain && checkedDomainName) {\n finalUSD_Text = `$${grandTotalUSD.toFixed(2)} USD <span class=\"text-[9px] font-normal text-slate-400 block sm:inline\">(Plano ${isYearly ? 'Anual' : 'Mensal'} + Dom\u00ednio ${selectedDomainYears} Ano${selectedDomainYears > 1 ? 's' : ''})<\/span>`;\n finalJPY_Text = `\u00a5${grandTotalJPY.toLocaleString('ja-JP')} JPY <span class=\"text-[9px] font-normal text-slate-400 block sm:inline\">(Plano + Dom\u00ednio)<\/span>`;\n finalBRL_Text = `R$ ${grandTotalBRL.toFixed(2)} BRL <span class=\"text-[9px] font-normal text-slate-400 block sm:inline\">(Plano + Dom\u00ednio)<\/span>`;\n } else {\n finalUSD_Text = `$${grandTotalUSD.toFixed(2)} USD <span class=\"text-[9px] font-normal text-slate-400 block sm:inline\">(${isYearly ? 'faturamento anual' : 'faturamento mensal'})<\/span>`;\n }\n\n document.getElementById('cart-total-usd').innerHTML = finalUSD_Text;\n document.getElementById('cart-total-jpy').innerHTML = finalJPY_Text;\n document.getElementById('cart-total-brl').innerHTML = finalBRL_Text;\n\n const chkBtn = document.getElementById('checkout-btn');\n const isEnable = planUSD > 0;\n \n if (chkBtn) {\n chkBtn.disabled = !isEnable;\n if (isEnable) {\n chkBtn.classList.remove('bg-slate-300', 'text-slate-500', 'cursor-not-allowed');\n chkBtn.classList.add('bg-emerald-600', 'hover:bg-emerald-700', 'text-white', 'cursor-pointer');\n } else {\n chkBtn.classList.add('bg-slate-300', 'text-slate-500', 'cursor-not-allowed');\n chkBtn.classList.remove('bg-emerald-600', 'hover:bg-emerald-700', 'text-white', 'cursor-pointer');\n }\n }\n }\n\n function openCheckoutModal() {\n if (!selectedPlanId) return;\n updateCheckoutSummary();\n\n const modal = document.getElementById('checkout-modal');\n modal.classList.remove('hidden');\n setTimeout(() => {\n modal.querySelector('div').classList.remove('scale-95', 'opacity-0');\n }, 10);\n }\n\n function closeCheckoutModal() {\n const modal = document.getElementById('checkout-modal');\n modal.querySelector('div').classList.add('scale-95', 'opacity-0');\n setTimeout(() => {\n modal.classList.add('hidden');\n }, 300);\n }\n\n \/\/ Geolocaliza\u00e7\u00e3o Reversa Nominatim\n function getCurrentLocation() {\n const btn = document.getElementById('get-location-btn');\n const originalText = btn.innerHTML;\n\n if (!(\"geolocation\" in navigator)) {\n showToast(\"Seu dispositivo ou navegador n\u00e3o suporta geolocaliza\u00e7\u00e3o.\", true);\n return;\n }\n\n btn.disabled = true;\n btn.innerHTML = `\n <svg class=\"animate-spin h-3.5 w-3.5 text-brand mr-1\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 1121.21 4H15V9\"\/>\n <\/svg>\n Resolvendo endere\u00e7o...\n `;\n\n navigator.geolocation.getCurrentPosition(async (position) => {\n const lat = position.coords.latitude;\n const lon = position.coords.longitude;\n \n try {\n const response = await fetch(`https:\/\/nominatim.openstreetmap.org\/reverse?format=json&lat=${lat}&lon=${lon}&zoom=18&addressdetails=1`);\n const data = await response.json();\n \n if (data && data.display_name) {\n document.getElementById('customer-address').value = data.display_name;\n if (data.address && data.address.house_number) {\n document.getElementById('address-number').value = data.address.house_number;\n }\n showToast(\"Localiza\u00e7\u00e3o GPS sincronizada com sucesso!\", false);\n queueDraftSave();\n } else {\n document.getElementById('customer-address').value = `Latitude: ${lat}, Longitude: ${lon}`;\n showToast(\"GPS obtido, mas sem endere\u00e7o resolvido.\", false);\n queueDraftSave();\n }\n } catch (err) {\n document.getElementById('customer-address').value = `Latitude: ${lat}, Longitude: ${lon}`;\n showToast(\"GPS capturado localmente.\", false);\n queueDraftSave();\n } finally {\n btn.innerHTML = originalText;\n btn.disabled = false;\n }\n }, (error) => {\n showToast(\"Erro ao obter GPS: \" + error.message, true);\n btn.innerHTML = originalText;\n btn.disabled = false;\n }, { timeout: 8000 });\n }\n\n function sendOrderAndRedirect() {\n const empresa = document.getElementById('customer-company').value.trim();\n const contato = document.getElementById('customer-phone').value.trim();\n const endereco = document.getElementById('customer-address').value.trim();\n const numero = document.getElementById('address-number').value.trim();\n const predio = document.getElementById('building-name').value.trim();\n\n if (!empresa) {\n showToast(\"Por favor, preencha o Nome da Empresa.\", true);\n return;\n }\n if (!contato) {\n showToast(\"Por favor, insira um Telefone de Contato.\", true);\n return;\n }\n if (!endereco) {\n showToast(\"Por favor, preencha o endere\u00e7o.\", true);\n return;\n }\n\n const plan = PLANS[selectedPlanId];\n let planText = plan.name;\n let totalPlanUSD = plan.price;\n if (plan.isPerUser) {\n totalPlanUSD = plan.price * plan.users;\n planText += ` (${plan.users} usu\u00e1rio${plan.users > 1 ? 's' : ''})`;\n }\n\n const isYearly = selectedBillingPeriod === 'anual';\n const discount = isYearly ? 0.9 : 1.0;\n const multiplier = isYearly ? 12 : 1;\n\n const discountedPlanUSD = totalPlanUSD * discount;\n const finalPlanUSD = discountedPlanUSD * multiplier;\n\n const totalPlanJPY = Math.round(discountedPlanUSD * multiplier * exchangeRates.JPY);\n const totalPlanBRL = discountedPlanUSD * multiplier * exchangeRates.BRL;\n\n const domainUSD = (wantToRegisterDomain && checkedDomainName) ? (DOMAIN_PRICE_ANNUAL_USD * selectedDomainYears) : 0;\n const domainJPY = Math.round(domainUSD * exchangeRates.JPY);\n const domainBRL = domainUSD * exchangeRates.BRL;\n\n const grandUSD = finalPlanUSD + domainUSD;\n const grandJPY = totalPlanJPY + domainJPY;\n const grandBRL = totalPlanBRL + domainBRL;\n\n const infoDominio = checkedDomainName || 'Nenhum';\n const querRegistrar = (isDomainAvailable && wantToRegisterDomain) ? `Sim (por ${selectedDomainYears} Ano${selectedDomainYears > 1 ? 's' : ''})` : 'N\u00e3o';\n\n let valueText = '';\n let planValueText = '';\n\n let localGrand_Today = 0;\n let localGrand_Next = 0;\n\n if (selectedPaymentCurrency === 'USD') {\n planValueText = `$${finalPlanUSD.toFixed(2)} USD (${isYearly ? 'Ano - Desconto de 10% Incluso' : 'M\u00eas'})`;\n valueText = `$${grandUSD.toFixed(2)} USD`;\n if (wantToRegisterDomain && checkedDomainName) valueText += ` ($${finalPlanUSD.toFixed(2)} Plano + $${domainUSD.toFixed(2)} Dom\u00ednio)`;\n localGrand_Today = grandUSD;\n localGrand_Next = finalPlanUSD;\n } else if (selectedPaymentCurrency === 'JPY') {\n planValueText = `\u00a5${totalPlanJPY.toLocaleString('ja-JP')} JPY (${isYearly ? 'Ano - Desconto de 10% Incluso' : 'M\u00eas'})`;\n valueText = `\u00a5${grandJPY.toLocaleString('ja-JP')} JPY`;\n if (wantToRegisterDomain && checkedDomainName) valueText += ` (\u00a5${totalPlanJPY.toLocaleString('ja-JP')} Plano + \u00a5${domainJPY.toLocaleString('ja-JP')} Dom\u00ednio)`;\n localGrand_Today = grandJPY;\n localGrand_Next = totalPlanJPY;\n } else if (selectedPaymentCurrency === 'BRL') {\n planValueText = `R$ ${totalPlanBRL.toFixed(2)} BRL (${isYearly ? 'Ano - Desconto de 10% Incluso' : 'M\u00eas'})`;\n valueText = `R$ ${grandBRL.toFixed(2)} BRL`;\n if (wantToRegisterDomain && checkedDomainName) valueText += ` (R$ ${totalPlanBRL.toFixed(2)} Plano + R$ ${domainBRL.toFixed(2)} Dom\u00ednio)`;\n localGrand_Today = grandBRL;\n localGrand_Next = totalPlanBRL;\n }\n\n const payload = {\n dataHora: new Date().toLocaleString('pt-BR'),\n empresa: empresa,\n contato: contato,\n endereco: endereco,\n numero: numero || 'Manual\/Nenhum',\n predio: predio || 'Manual\/Nenhum',\n pacote: planText + ` - Faturamento ${isYearly ? 'Anual (10% Desc.)' : 'Mensal'}`,\n dominio: infoDominio,\n registrarDominio: querRegistrar,\n moedaPagamento: selectedPaymentCurrency,\n total: `$${grandUSD.toFixed(2)} USD (\u00a5${grandJPY.toLocaleString('ja-JP')} JPY \/ R$ ${grandBRL.toFixed(2)} BRL)`,\n valorCobrado: valueText\n };\n\n \/\/ Envio Oculto e Blindado de Formul\u00e1rio para Google Sheets\n if (APPS_SCRIPT_WEBHOOK && APPS_SCRIPT_WEBHOOK.startsWith('http')) {\n try {\n document.getElementById('sheet-dataHora').value = payload.dataHora;\n document.getElementById('sheet-empresa').value = payload.empresa;\n document.getElementById('sheet-contato').value = payload.contato;\n document.getElementById('sheet-endereco').value = payload.endereco;\n document.getElementById('sheet-numero').value = payload.numero;\n document.getElementById('sheet-predio').value = payload.predio;\n document.getElementById('sheet-pacote').value = payload.pacote;\n document.getElementById('sheet-dominio').value = payload.dominio;\n document.getElementById('sheet-registrarDominio').value = payload.registrarDominio;\n document.getElementById('sheet-moedaPagamento').value = payload.moedaPagamento;\n document.getElementById('sheet-total').value = payload.total;\n document.getElementById('sheet-valorCobrado').value = payload.valorCobrado;\n\n const form = document.getElementById('google_sheets_form');\n form.action = APPS_SCRIPT_WEBHOOK;\n form.submit();\n console.log(\"Formul\u00e1rio Google Sheets enviado.\");\n } catch (formError) {\n console.error(\"Falha ao registrar em Planilha:\", formError);\n }\n }\n\n \/\/ Limpa o rascunho do Firestore\n clearDraftFromFirestore();\n\n \/\/ Formata\u00e7\u00e3o altamente profissional do conte\u00fado para o WhatsApp (Sem abrir nova aba, prevenindo popup blockers)\n let waMsg = `*OR\u00c7AMENTO CONSOLIDADO - COBRASI NETWORK*%0A%0A`;\n waMsg += `\ud83c\udfe2 *Empresa:* ${empresa}%0A`;\n waMsg += `\ud83d\udcde *Contato:* ${contato}%0A`;\n waMsg += `\ud83d\udccd *Endere\u00e7o:* ${endereco}%0A`;\n if (numero) waMsg += `\ud83d\udd22 *N\u00ba Casa\/Pr\u00e9dio:* ${numero}%0A`;\n if (predio) waMsg += `\ud83c\udfe2 *Nome Edif\u00edcio:* ${predio}%0A`;\n waMsg += `%0A*--- DETALHES DO PEDIDO ---*%0A`;\n waMsg += `\ud83d\udce6 *Plano:* ${planText}%0A`;\n waMsg += `\ud83d\udcc5 *Ciclo de Cobran\u00e7a do Plano:* ${isYearly ? 'ANUAL (10% DESC. INCLUSO)' : 'MENSAL'}%0A`;\n \n if (checkedDomainName) {\n waMsg += `\ud83c\udf10 *Dom\u00ednio Solicitado:* ${checkedDomainName}%0A`;\n waMsg += `\ud83d\udcdd *Contratar Registro Conosco?:* ${querRegistrar}%0A`;\n if (wantToRegisterDomain) {\n waMsg += `\ud83d\udcc5 *Ciclo de Cobran\u00e7a do Dom\u00ednio:* ANUAL (${selectedDomainYears} Ano${selectedDomainYears > 1 ? 's' : ''} de Registro)%0A`;\n }\n }\n \n waMsg += `%0A*--- FLUXO FINANCEIRO ---*%0A`;\n waMsg += `\ud83d\udcb5 *Moeda de Cobran\u00e7a Escolhida:* ${selectedPaymentCurrency}%0A`;\n waMsg += `\ud83d\udd25 *PAGAMENTO HOJE:* ${formatVal(localGrand_Today, selectedPaymentCurrency)}%0A`;\n waMsg += `\u23f3 *PR\u00d3XIMO PAGAMENTO:* ${formatVal(localGrand_Next, selectedPaymentCurrency)} (referente apenas ao plano recorrente em ${isYearly ? '1 ano' : '30 dias'})%0A%0A`;\n \n waMsg += `_Valores de Refer\u00eancia Totais (Convers\u00e3o Direta):_%0A`;\n waMsg += `\u2022 $ ${grandUSD.toFixed(2)} USD%0A`;\n waMsg += `\u2022 \u00a5 ${grandJPY.toLocaleString('ja-JP')} JPY%0A`;\n waMsg += `\u2022 R$ ${grandBRL.toFixed(2)} BRL%0A%0A`;\n waMsg += `_Sincroniza\u00e7\u00e3o em nuvem e planilha ativa._`;\n\n const waURL = `https:\/\/api.whatsapp.com\/send?phone=${WHATSAPP_NUMBER}&text=${waMsg}`;\n \n showToast(\"Or\u00e7amento Salvo! Redirecionando para o WhatsApp...\", false);\n \n setTimeout(() => {\n window.location.href = waURL;\n closeCheckoutModal();\n }, 1000);\n }\n\n function showToast(text, isError = false) {\n const container = document.getElementById('toast-container');\n const toast = document.createElement('div');\n \n toast.className = `transform translate-y-10 opacity-0 transition-all duration-300 rounded-2xl px-4 py-3.5 text-xs font-bold shadow-2xl flex items-center gap-2.5 pointer-events-auto ${\n isError ? 'bg-rose-600 text-white border border-rose-500' : 'bg-slate-900 text-white border border-slate-800'\n }`;\n \n const icon = isError \n ? `<svg class=\"w-4 h-4 text-rose-300\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\/><\/svg>` \n : `<svg class=\"w-4 h-4 text-emerald-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"\/><\/svg>`;\n\n toast.innerHTML = `${icon} <span>${text}<\/span>`;\n container.appendChild(toast);\n \n setTimeout(() => {\n toast.classList.remove('translate-y-10', 'opacity-0');\n }, 10);\n\n setTimeout(() => {\n toast.classList.add('translate-y-10', 'opacity-0');\n setTimeout(() => toast.remove(), 300);\n }, 4000);\n }\n\n \/\/ Vincula\u00e7\u00e3o Global Segura de M\u00f3dulos para Eventos do Navegador (Window Binding)\n window.selectPackage = selectPackage;\n window.incrementUsers = incrementUsers;\n window.decrementUsers = decrementUsers;\n window.updateUsersInput = updateUsersInput;\n window.changePaymentCurrency = changePaymentCurrency;\n window.changeBillingPeriod = changeBillingPeriod;\n window.checkDomainNetwork = checkDomainNetwork;\n window.toggleDomainRegisterSelection = toggleDomainRegisterSelection;\n window.changeDomainYears = changeDomainYears;\n window.openCheckoutModal = openCheckoutModal;\n window.closeCheckoutModal = closeCheckoutModal;\n window.getCurrentLocation = getCurrentLocation;\n window.sendOrderAndRedirect = sendOrderAndRedirect;\n window.openVideoModal = openVideoModal;\n window.closeVideoModal = closeVideoModal;\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Calculadora de Or\u00e7amento – Cobrasi Network C\u00e2mbio de Hoje (Base USD): Carregando taxas de c\u00e2mbio… Painel Integrado Cobrasi Network Total do Or\u00e7amento Escolhido $0,00 USD \/m\u00eas \u00a50 JPY R$0,00 BRL Mensal Anual -10% USD JPY BRL USD: $0.00 JPY: \u00a50 BRL: R$0.00 Avan\u00e7ar & Preencher Dados COBRASI NETWORK Sistemas Inteligentes & Integra\u00e7\u00f5es Precisa de assist\u00eancia t\u00e9cnica? Falar com Consultor Simulador de Or\u00e7amentos Escolha a Solu\u00e7\u00e3o Ideal para seu Neg\u00f3cio Selecione o plano desejado abaixo. Ajuste suas prefer\u00eancias de faturamento e moedas diretamente no painel de controle superior fixo. Etapa Recomendada Deseja um dom\u00ednio personalizado para seu projeto? Verificamos na hora a disponibilidade de registro do endere\u00e7o de web que voc\u00ea […]<\/p>","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_joinchat":[],"footnotes":""},"class_list":["post-3080","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cobrasi.com.br\/ja\/wp-json\/wp\/v2\/pages\/3080","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cobrasi.com.br\/ja\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cobrasi.com.br\/ja\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cobrasi.com.br\/ja\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/cobrasi.com.br\/ja\/wp-json\/wp\/v2\/comments?post=3080"}],"version-history":[{"count":85,"href":"https:\/\/cobrasi.com.br\/ja\/wp-json\/wp\/v2\/pages\/3080\/revisions"}],"predecessor-version":[{"id":3176,"href":"https:\/\/cobrasi.com.br\/ja\/wp-json\/wp\/v2\/pages\/3080\/revisions\/3176"}],"wp:attachment":[{"href":"https:\/\/cobrasi.com.br\/ja\/wp-json\/wp\/v2\/media?parent=3080"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n Calculadora de Or\u00e7amento - Cobrasi Network<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n brand: {\n light: '#60a5fa',\n DEFAULT: '#1d4ed8', \/\/ Azul royal premium para contraste superior\n dark: '#1e40af',\n accent: '#10b981'\n }\n },\n fontFamily: {\n sans: ['Inter', 'sans-serif'],\n }\n }\n }\n }\n <\/script>\n <style>\n body {\n font-family: 'Inter', sans-serif;\n -webkit-font-smoothing: antialiased;\n }\n .package-card {\n transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n }\n .package-card.selected {\n border-color: #1d4ed8;\n background-color: #f8fafc;\n transform: translateY(-6px);\n box-shadow: 0 20px 25px -5px rgba(29, 78, 216, 0.1), 0 10px 10px -5px rgba(29, 78, 216, 0.04);\n }\n \/* Scrollbar Personalizada Premium *\/\n ::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n }\n ::-webkit-scrollbar-track {\n background: #f8fafc;\n }\n ::-webkit-scrollbar-thumb {\n background: #cbd5e1;\n border-radius: 9999px;\n border: 2px solid #f8fafc;\n }\n ::-webkit-scrollbar-thumb:hover {\n background: #94a3b8;\n }\n <\/style>\n<\/head>\n<body class=\"bg-slate-50 text-slate-900 min-h-screen flex flex-col justify-between selection:bg-brand selection:text-white\">\n\n \n <div class=\"bg-slate-900 text-white py-2 px-4 text-xs font-semibold shadow-sm z-50\">\n <div class=\"max-w-6xl mx-auto flex flex-col sm:flex-row justify-between items-center gap-2\">\n <div class=\"flex items-center gap-2\">\n <span class=\"relative flex h-2 w-2\">\n <span class=\"animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75\"><\/span>\n <span class=\"relative inline-flex rounded-full h-2 w-2 bg-emerald-500\"><\/span>\n <\/span>\n <span>C\u00e2mbio de Hoje (Base USD):<\/span>\n <span id=\"ticker-rates\" class=\"text-slate-300\">Carregando taxas de c\u00e2mbio...<\/span>\n <\/div>\n <div class=\"text-slate-400 text-[10px] uppercase tracking-wider\">Painel Integrado Cobrasi Network<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"fixed top-[40px] sm:top-[32px] left-0 right-0 bg-white\/95 backdrop-blur-md border-b border-slate-200\/80 py-3 px-4 shadow-[0_4px_20px_-5px_rgba(0,0,0,0.08)] z-40 transition-all duration-300\">\n <div class=\"max-w-5xl mx-auto flex flex-col md:flex-row justify-between items-center gap-4\">\n \n \n <div class=\"flex items-center justify-between w-full md:w-auto gap-4\">\n <div class=\"flex flex-col\">\n <span class=\"text-[9px] font-black text-slate-400 uppercase tracking-wider\">Total do Or\u00e7amento Escolhido<\/span>\n <div class=\"flex items-baseline gap-1.5\">\n <span id=\"cart-total-usd\" class=\"text-xl md:text-2xl font-black text-slate-950\">$0,00 USD<\/span>\n <span class=\"text-[10px] text-slate-400 font-medium\">\/m\u00eas<\/span>\n <\/div>\n <div class=\"flex gap-2 mt-1 text-[9px] font-bold text-slate-600\">\n <span class=\"bg-slate-100 px-2 py-0.5 rounded text-slate-700 shadow-sm border border-slate-200\/55\" id=\"cart-total-jpy\">\u00a50 JPY<\/span>\n <span class=\"bg-slate-100 px-2 py-0.5 rounded text-slate-700 shadow-sm border border-slate-200\/55\" id=\"cart-total-brl\">R$0,00 BRL<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"flex flex-wrap items-center justify-center gap-3 w-full md:w-auto\">\n \n <div class=\"bg-slate-100\/90 p-1 rounded-2xl border border-slate-200\/60 flex items-center gap-1 shadow-inner\">\n <button type=\"button\" id=\"top-period-monthly\" onclick=\"changeBillingPeriod('mensal')\" \n class=\"px-3.5 py-1.5 rounded-xl text-[10px] md:text-xs font-bold transition-all duration-300 focus:outline-none bg-brand text-white shadow-md\">\n Mensal\n <\/button>\n <button type=\"button\" id=\"top-period-yearly\" onclick=\"changeBillingPeriod('anual')\" \n class=\"px-3.5 py-1.5 rounded-xl text-[10px] md:text-xs font-bold transition-all duration-300 focus:outline-none text-slate-600 hover:text-slate-900 flex items-center gap-1\">\n Anual \n <span class=\"bg-emerald-500 text-white text-[8px] px-1.5 py-0.5 rounded-md font-black uppercase\">-10%<\/span>\n <\/button>\n <\/div>\n\n \n <div class=\"flex flex-col items-center gap-1.5\">\n <div class=\"bg-slate-100\/90 p-1 rounded-2xl border border-slate-200\/60 flex items-center gap-1 shadow-inner\">\n <button type=\"button\" id=\"top-currency-USD\" onclick=\"changePaymentCurrency('USD')\" \n class=\"px-3 py-1.5 rounded-xl text-[10px] md:text-xs font-bold transition-all duration-200\">\n USD\n <\/button>\n <button type=\"button\" id=\"top-currency-JPY\" onclick=\"changePaymentCurrency('JPY')\" \n class=\"px-3 py-1.5 rounded-xl text-[10px] md:text-xs font-bold transition-all duration-200\">\n JPY\n <\/button>\n <button type=\"button\" id=\"top-currency-BRL\" onclick=\"changePaymentCurrency('BRL')\" \n class=\"px-3 py-1.5 rounded-xl text-[10px] md:text-xs font-bold transition-all duration-200\">\n BRL\n <\/button>\n <\/div>\n \n <div class=\"flex gap-1 text-[8px] md:text-[9px] font-black uppercase tracking-wider\">\n <span id=\"header-val-usd\" class=\"px-2 py-0.5 rounded-md border transition-all duration-300\">USD: $0.00<\/span>\n <span id=\"header-val-jpy\" class=\"px-2 py-0.5 rounded-md border transition-all duration-300\">JPY: \u00a50<\/span>\n <span id=\"header-val-brl\" class=\"px-2 py-0.5 rounded-md border transition-all duration-300\">BRL: R$0.00<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n \n <button id=\"checkout-btn\" disabled onclick=\"openCheckoutModal()\" \n class=\"w-full md:w-auto bg-slate-300 text-slate-500 cursor-not-allowed font-extrabold py-3 px-6 rounded-xl transition-all text-xs uppercase tracking-wider flex items-center justify-center gap-2 shadow-md hover:scale-[1.01]\">\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z\"\/>\n <\/svg>\n Avan\u00e7ar & Preencher Dados\n <\/button>\n\n <\/div>\n <\/div>\n\n \n <div class=\"h-[180px] md:h-[130px] w-full\"><\/div>\n\n \n <header class=\"bg-white border-b border-slate-200\/80 py-5 px-4 backdrop-blur-md\">\n <div class=\"max-w-5xl mx-auto flex flex-col sm:flex-row justify-between items-center gap-4\">\n <div class=\"flex items-center gap-4\">\n \n <div class=\"relative group\">\n <div class=\"absolute -inset-1 rounded-2xl bg-gradient-to-r from-brand to-emerald-500 opacity-20 blur-md transition duration-300 group-hover:opacity-40\"><\/div>\n <img decoding=\"async\" id=\"main-brand-logo\" src=\"https:\/\/cobrasi.com.br\/wp-content\/uploads\/2026\/05\/cropped-ChatGPT-Image-16-de-mai.-de-2026-14_11_24.png\" \n alt=\"Logo Cobrasi Network\" \n class=\"relative w-12 h-12 object-contain rounded-xl bg-white p-1 border border-slate-200 shadow-sm transition-transform duration-300 group-hover:scale-105\"\n onerror=\"handleLogoFallback()\">\n <\/div>\n <div>\n <h1 class=\"font-extrabold text-xl tracking-tight text-slate-900 leading-none mb-1\">COBRASI <span class=\"text-brand\">NETWORK<\/span><\/h1>\n <p class=\"text-[10px] text-slate-500 font-bold uppercase tracking-wider\">Sistemas Inteligentes & Integra\u00e7\u00f5es<\/p>\n <\/div>\n <\/div>\n \n <div class=\"flex items-center gap-3\">\n <span class=\"text-xs font-semibold text-slate-500 hidden md:inline\">Precisa de assist\u00eancia t\u00e9cnica?<\/span>\n <a href=\"https:\/\/api.whatsapp.com\/send?phone=817012740701\" target=\"_blank\" \n class=\"text-xs bg-emerald-50 hover:bg-emerald-100 text-emerald-800 font-extrabold py-2.5 px-4 rounded-xl transition-all duration-300 flex items-center gap-2 border border-emerald-200\/60 shadow-sm active:scale-95\">\n <svg class=\"w-4 h-4 text-emerald-600\" fill=\"currentColor\" viewbox=\"0 0 24 24\">\n <path d=\"M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946C.06 5.348 5.397.01 12.008.01c3.202.001 6.212 1.246 8.477 3.514 2.266 2.268 3.507 5.28 3.505 8.484-.004 6.657-5.34 11.997-11.953 11.997-2.005-.001-3.973-.502-5.724-1.457L0 24zm6.59-4.846c1.6.95 3.488 1.449 5.414 1.451 5.508 0 9.99-4.447 9.993-9.904.002-2.645-1.026-5.131-2.895-7.001C17.288 1.83 14.8 1.8 12.013 1.8c-5.514 0-10 4.45-10.003 9.909-.001 1.895.498 3.745 1.445 5.358L2.4 21.64l4.247-1.486z\"\/>\n <\/svg>\n Falar com Consultor\n <\/a>\n <\/div>\n <\/div>\n <\/header>\n\n \n <main class=\"max-w-5xl mx-auto p-4 sm:p-6 lg:p-8 flex-1 w-full pb-16\">\n \n <div class=\"text-center max-w-2xl mx-auto mb-10\">\n <span class=\"text-xs font-extrabold text-brand bg-blue-50\/80 border border-blue-100 px-3.5 py-1.5 rounded-full uppercase tracking-wider\">Simulador de Or\u00e7amentos<\/span>\n <h2 class=\"text-3xl font-black text-slate-900 mt-4 tracking-tight sm:text-4xl\">Escolha a Solu\u00e7\u00e3o Ideal para seu Neg\u00f3cio<\/h2>\n <p class=\"text-slate-500 mt-2 text-sm leading-relaxed\">Selecione o plano desejado abaixo. Ajuste suas prefer\u00eancias de faturamento e moedas diretamente no painel de controle superior fixo.<\/p>\n <\/div>\n\n \n <div class=\"bg-gradient-to-br from-blue-50\/40 via-white to-indigo-50\/20 border border-slate-200 rounded-3xl p-6 sm:p-8 mb-8 shadow-sm relative overflow-hidden ring-4 ring-blue-500\/[0.02]\">\n <div class=\"absolute -top-12 -right-12 w-32 h-32 bg-brand\/5 rounded-full blur-2xl pointer-events-none\"><\/div>\n \n <div class=\"flex items-center gap-2 mb-3\">\n <span class=\"bg-indigo-600 text-white text-[10px] font-black uppercase px-3 py-1 rounded-full tracking-wider shadow-sm\">Etapa Recomendada<\/span>\n <\/div>\n\n <h3 class=\"text-lg font-extrabold text-slate-900 mb-1 flex items-center gap-2\">\n <svg class=\"w-5 h-5 text-indigo-600 shrink-0\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9\"\/>\n <\/svg>\n Deseja um dom\u00ednio personalizado para seu projeto?\n <\/h3>\n <p class=\"text-xs text-slate-500 mb-5 leading-relaxed\">Verificamos na hora a disponibilidade de registro do endere\u00e7o de web que voc\u00ea planeja usar.<\/p>\n \n <div class=\"flex flex-col sm:flex-row gap-3\">\n <div class=\"relative flex-1\">\n <input type=\"text\" id=\"domain-input\" \n class=\"w-full bg-white border border-slate-300 rounded-xl pl-4 pr-10 py-3 text-sm font-semibold focus:outline-none focus:ring-2 focus:ring-brand focus:border-brand transition-all shadow-inner text-slate-800\" \n placeholder=\"Ex: minhaempresa.com ou meuapp.com.br\">\n <\/div>\n <button id=\"btn-check-domain\" onclick=\"checkDomainNetwork()\" \n class=\"bg-indigo-600 hover:bg-indigo-700 text-white font-extrabold py-3 px-6 rounded-xl text-sm transition-all flex items-center justify-center gap-2 shadow-md shadow-indigo-600\/10 active:scale-[0.98] transform\">\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"\/>\n <\/svg>\n Consultar Disponibilidade\n <\/button>\n <\/div>\n \n \n <div id=\"domain-result\" class=\"mt-4 hidden\"><\/div>\n <\/div>\n\n \n <div class=\"grid grid-cols-1 gap-6 mb-12\">\n \n \n <div id=\"card-base\" onclick=\"selectPackage('base')\" \n class=\"package-card border border-slate-200 bg-white rounded-2xl p-6 cursor-pointer hover:border-slate-300 relative overflow-hidden group\">\n <div class=\"absolute top-0 right-0 bg-slate-100 text-slate-700 font-bold text-[9px] uppercase px-3 py-1.5 rounded-bl-xl tracking-wider group-hover:bg-slate-200 transition-colors\">Plano Inicial<\/div>\n <div class=\"flex flex-col md:flex-row justify-between items-start md:items-center gap-6\">\n <div class=\"flex-1\">\n <div class=\"flex items-center gap-2.5 mb-2\">\n <span class=\"w-6 h-6 rounded-lg bg-blue-100 text-brand flex items-center justify-center font-extrabold text-xs\">1<\/span>\n <h3 class=\"text-lg font-bold text-slate-900\">AppSheet Subscription (Base)<\/h3>\n <\/div>\n <p class=\"text-slate-600 text-sm leading-relaxed mb-3\">\n Ideal para estrutura\u00e7\u00e3o prim\u00e1ria de territ\u00f3rios de atendimento e controle \u00e1gil de rotas de vendas direto no smartphone.\n <\/p>\n \n \n <button onclick=\"openVideoModal(event)\" class=\"mb-4 inline-flex items-center gap-1.5 text-xs text-blue-600 hover:text-blue-800 font-bold bg-blue-50\/80 hover:bg-blue-100 px-3 py-1.5 rounded-xl border border-blue-200 transition-colors shadow-sm active:scale-95\">\n <svg class=\"w-3.5 h-3.5 text-blue-600\" fill=\"currentColor\" viewbox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z\" clip-rule=\"evenodd\"\/>\n <\/svg>\n V\u00eddeo de Demonstra\u00e7\u00e3o\n <\/button>\n \n \n <div class=\"bg-slate-50 rounded-xl p-4 border border-slate-200\/60 max-w-xl\">\n <h4 class=\"text-xs font-bold text-slate-800 uppercase tracking-wider mb-2 flex items-center gap-1.5\">\n <svg class=\"w-4 h-4 text-brand\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\"\/>\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\"\/>\n <\/svg>\n Geolocaliza\u00e7\u00e3o Autom\u00e1tica Inteligente:\n <\/h4>\n <p class=\"text-xs text-slate-500 leading-relaxed\">\n Sincronize rotas acionando o bot\u00e3o <strong>\"Add Address\"<\/strong>. O promotor ou t\u00e9cnico preenche apenas os dados essenciais e as coordenadas geogr\u00e1ficas GPS criam o endere\u00e7o de forma 100% automatizada.\n <\/p>\n <\/div>\n <\/div>\n \n <div class=\"w-full md:w-auto flex flex-col sm:flex-row md:flex-col items-stretch sm:items-center md:items-end gap-4 self-stretch md:self-center bg-slate-50 md:bg-transparent p-4 md:p-0 rounded-xl\">\n <div class=\"flex flex-col md:items-end justify-center\">\n <span class=\"text-[10px] font-bold text-slate-400 uppercase tracking-wider\">Pre\u00e7o por Usu\u00e1rio<\/span>\n <span class=\"text-xl font-black text-slate-900\" id=\"base-price-display\">$35,00 USD <span class=\"text-xs font-normal text-slate-500\">\/m\u00eas<\/span><\/span>\n <div class=\"flex gap-1.5 mt-1 text-[10px] font-semibold text-slate-500\">\n <span class=\"bg-slate-200\/75 px-1.5 py-0.5 rounded\" id=\"base-price-jpy\">\u00a50 JPY<\/span>\n <span class=\"bg-slate-200\/75 px-1.5 py-0.5 rounded\" id=\"base-price-brl\">R$0,00 BRL<\/span>\n <\/div>\n <\/div>\n \n \n <div class=\"flex items-center gap-2 bg-white border border-slate-200 rounded-xl p-1.5 shadow-sm\" onclick=\"event.stopPropagation()\">\n <span class=\"text-xs font-bold text-slate-500 px-1\">Usu\u00e1rios:<\/span>\n <button onclick=\"decrementUsers(event)\" class=\"w-8 h-8 bg-slate-100 hover:bg-slate-200 rounded-lg font-bold text-slate-800 transition-colors flex items-center justify-center\">-<\/button>\n <input type=\"number\" id=\"user-count\" value=\"1\" min=\"1\" class=\"w-10 text-center font-bold text-slate-900 border-none outline-none focus:ring-0 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none\" onchange=\"updateUsersInput(this.value)\" oninput=\"updateUsersInput(this.value)\">\n <button onclick=\"incrementUsers(event)\" class=\"w-8 h-8 bg-slate-100 hover:bg-slate-200 rounded-lg font-bold text-slate-800 transition-colors flex items-center justify-center\">+<\/button>\n <\/div>\n\n <button class=\"select-btn w-full bg-slate-100 text-slate-800 font-bold py-2.5 px-4 rounded-xl transition-all text-xs text-center border border-slate-200 hover:bg-brand hover:text-white\">\n Selecionar Plano\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"card-integrated\" onclick=\"selectPackage('integrated')\" \n class=\"package-card border border-slate-200 bg-white rounded-2xl p-6 cursor-pointer hover:border-slate-300 relative overflow-hidden group\">\n <div class=\"absolute top-0 right-0 bg-blue-600 text-white font-bold text-[9px] uppercase px-3 py-1.5 rounded-bl-xl tracking-wider shadow-sm\">Mais Vendido<\/div>\n <div class=\"flex flex-col md:flex-row justify-between items-start md:items-center gap-6\">\n <div class=\"flex-1\">\n <div class=\"flex items-center gap-2.5 mb-2\">\n <span class=\"w-6 h-6 rounded-lg bg-blue-100 text-brand flex items-center justify-center font-extrabold text-xs\">2<\/span>\n <h3 class=\"text-lg font-bold text-slate-900\">Pacote Integrado: AppSheet + WebSite<\/h3>\n <\/div>\n <p class=\"text-slate-600 text-sm leading-relaxed mb-3\">\n Sincroniza\u00e7\u00e3o bidirecional instant\u00e2nea entre a base administrativa mobile (AppSheet) e o seu site institucional p\u00fablico.\n <\/p>\n \n \n <button onclick=\"openVideoModal(event)\" class=\"mb-4 inline-flex items-center gap-1.5 text-xs text-blue-600 hover:text-blue-800 font-bold bg-blue-50\/80 hover:bg-blue-100 px-3 py-1.5 rounded-xl border border-blue-200 transition-colors shadow-sm active:scale-95\">\n <svg class=\"w-3.5 h-3.5 text-blue-600\" fill=\"currentColor\" viewbox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z\" clip-rule=\"evenodd\"\/>\n <\/svg>\n V\u00eddeo de Demonstra\u00e7\u00e3o\n <\/button>\n \n \n <div class=\"bg-blue-50\/50 rounded-xl p-4 border border-blue-100\/60 max-w-xl\">\n <h4 class=\"text-xs font-bold text-blue-950 uppercase tracking-wider mb-2 flex items-center gap-1.5\">\n <svg class=\"w-4 h-4 text-brand\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 10V3L4 14h7v7l9-11h-7z\"\/>\n <\/svg>\n Exemplo Pr\u00e1tico (Exposi\u00e7\u00e3o de Produtos\/Im\u00f3veis\/Carros):\n <\/h4>\n <p class=\"text-xs text-slate-600 leading-relaxed\">\n Registre fotos e especifica\u00e7\u00f5es no celular de qualquer local atrav\u00e9s do aplicativo de gest\u00e3o. Automaticamente, todos os dados alimentam sua planilha e o <strong>produto \u00e9 anunciado no site na mesma hora<\/strong>!\n <\/p>\n <\/div>\n <\/div>\n \n <div class=\"w-full md:w-auto flex flex-col sm:flex-row md:flex-col items-stretch sm:items-center md:items-end gap-4 self-stretch md:self-center bg-slate-50 md:bg-transparent p-4 md:p-0 rounded-xl\">\n <div class=\"flex flex-col md:items-end justify-center\">\n <span class=\"text-[10px] font-bold text-slate-400 uppercase tracking-wider\">Assinatura Mensal<\/span>\n <span class=\"text-xl font-black text-slate-950\" id=\"integrated-price-display\">$90,00 USD <span class=\"text-xs font-normal text-slate-500\">\/m\u00eas<\/span><\/span>\n <div class=\"flex gap-1.5 mt-1 text-[10px] font-semibold text-slate-500\">\n <span class=\"bg-slate-200\/75 px-1.5 py-0.5 rounded\" id=\"integrated-price-jpy\">\u00a50 JPY<\/span>\n <span class=\"bg-slate-200\/75 px-1.5 py-0.5 rounded\" id=\"integrated-price-brl\">R$0,00 BRL<\/span>\n <\/div>\n <\/div>\n \n <button class=\"select-btn w-full bg-slate-100 text-slate-800 font-bold py-2.5 px-4 rounded-xl transition-all text-xs text-center border border-slate-200 hover:bg-brand hover:text-white\">\n Selecionar Plano\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"card-premium\" onclick=\"selectPackage('premium')\" \n class=\"package-card border border-slate-200 bg-white rounded-2xl p-6 cursor-pointer hover:border-slate-300 relative overflow-hidden group\">\n <div class=\"absolute top-0 right-0 bg-emerald-600 text-white font-bold text-[9px] uppercase px-3 py-1.5 rounded-bl-xl tracking-wider shadow-sm\">Completo & Premium<\/div>\n <div class=\"flex flex-col md:flex-row justify-between items-start md:items-center gap-6\">\n <div class=\"flex-1\">\n <div class=\"flex items-center gap-2.5 mb-2\">\n <span class=\"w-6 h-6 rounded-lg bg-blue-100 text-brand flex items-center justify-center font-extrabold text-xs\">3<\/span>\n <h3 class=\"text-lg font-bold text-slate-900\">Pacote Premium: AppSheet + WebSite + Redes Sociais<\/h3>\n <\/div>\n <p class=\"text-slate-600 text-sm leading-relaxed mb-3\">\n Maximiza\u00e7\u00e3o de processos 360\u00b0. Integra\u00e7\u00e3o total conectando sua gest\u00e3o interna interna, cat\u00e1logo online e redes de engajamento social.\n <\/p>\n \n \n <button onclick=\"openVideoModal(event)\" class=\"mb-4 inline-flex items-center gap-1.5 text-xs text-blue-600 hover:text-blue-800 font-bold bg-blue-50\/80 hover:bg-blue-100 px-3 py-1.5 rounded-xl border border-blue-200 transition-colors shadow-sm active:scale-95\">\n <svg class=\"w-3.5 h-3.5 text-blue-600\" fill=\"currentColor\" viewbox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z\" clip-rule=\"evenodd\"\/>\n <\/svg>\n V\u00eddeo de Demonstra\u00e7\u00e3o\n <\/button>\n \n \n <div class=\"bg-emerald-50\/40 rounded-xl p-4 border border-emerald-100 text-xs max-w-xl\">\n <h4 class=\"text-xs font-extrabold text-emerald-950 uppercase tracking-wider mb-2 flex items-center gap-1.5\">\n <svg class=\"w-4 h-4 text-emerald-600\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"\/>\n <\/svg>\n Automa\u00e7\u00e3o de Marketing de Atra\u00e7\u00e3o:\n <\/h4>\n <ul class=\"text-xs text-slate-600 leading-relaxed space-y-1\">\n <li>\u2022 <strong>Social Media Sync:<\/strong> Postagens autom\u00e1ticas no Instagram e Facebook ao cadastrar uma nova entrada de invent\u00e1rio no seu painel administrativo.<\/li>\n <li>\u2022 <strong>Intelig\u00eancia de Tempo:<\/strong> Elimine o retrabalho manual de upload em m\u00faltiplos canais.<\/li>\n <\/ul>\n <\/div>\n <\/div>\n \n <div class=\"w-full md:w-auto flex flex-col sm:flex-row md:flex-col items-stretch sm:items-center md:items-end gap-4 self-stretch md:self-center bg-slate-50 md:bg-transparent p-4 md:p-0 rounded-xl\">\n <div class=\"flex flex-col md:items-end justify-center\">\n <span class=\"text-[10px] font-bold text-slate-400 uppercase tracking-wider\">Assinatura Mensal<\/span>\n <span class=\"text-xl font-black text-slate-950\" id=\"premium-price-display\">$120,00 USD <span class=\"text-xs font-normal text-slate-500\">\/m\u00eas<\/span><\/span>\n <div class=\"flex gap-1.5 mt-1 text-[10px] font-semibold text-slate-500\">\n <span class=\"bg-slate-200\/75 px-1.5 py-0.5 rounded\" id=\"premium-price-jpy\">\u00a50 JPY<\/span>\n <span class=\"bg-slate-200\/75 px-1.5 py-0.5 rounded\" id=\"premium-price-brl\">R$0,00 BRL<\/span>\n <\/div>\n <\/div>\n \n <button class=\"select-btn w-full bg-slate-100 text-slate-800 font-bold py-2.5 px-4 rounded-xl transition-all text-xs text-center border border-slate-200 hover:bg-brand hover:text-white\">\n Selecionar Plano\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n\n \n <div class=\"bg-white border border-slate-200 rounded-2xl p-6 mb-8 shadow-sm\">\n <h3 class=\"text-base font-bold text-slate-900 mb-3 flex items-center gap-2\">\n <svg class=\"w-5 h-5 text-emerald-600\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"\/>\n <\/svg>\n Como funciona o registro do seu or\u00e7amento?\n <\/h3>\n <p class=\"text-sm text-slate-600 leading-relaxed mb-4\">\n Ao preencher os dados finais de contato no formul\u00e1rio, nosso script de processamento em nuvem registra as configura\u00e7\u00f5es do seu plano e suas prefer\u00eancias diretamente na aba **Clientes** da sua planilha de controle. Logo ap\u00f3s, uma janela estruturada de mensagens \u00e9 aberta no WhatsApp do seu consultor respons\u00e1vel para formalizar a entrega t\u00e9cnica.\n <\/p>\n <div class=\"bg-slate-50 border border-slate-150 rounded-xl p-3 flex flex-col sm:flex-row sm:justify-between sm:items-center gap-2\">\n <div class=\"text-xs text-slate-500 font-medium\">\n <strong>Contato da Unidade de Integra\u00e7\u00e3o:<\/strong> +81 70-1274-0701\n <\/div>\n <div class=\"text-xs text-slate-400 font-medium\">Isesaki, Gunma - Jap\u00e3o<\/div>\n <\/div>\n <\/div>\n\n <\/main>\n\n \n <div id=\"video-modal\" class=\"fixed inset-0 bg-slate-950\/80 z-[70] hidden backdrop-blur-sm flex items-center justify-center p-4\">\n <div class=\"bg-slate-950 rounded-3xl overflow-hidden shadow-2xl w-full max-w-3xl transform scale-95 opacity-0 transition-all duration-300 relative border border-slate-800\">\n \n <button onclick=\"closeVideoModal()\" class=\"absolute top-4 right-4 text-white hover:text-slate-200 bg-black\/60 hover:bg-black\/80 p-2.5 rounded-full transition-all z-10 hover:scale-105 active:scale-95 shadow-lg\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"\/>\n <\/svg>\n <\/button>\n \n <div class=\"relative pt-[56.25%] w-full bg-black\">\n <iframe id=\"video-iframe\" class=\"absolute inset-0 w-full h-full\" src=\"\" title=\"V\u00eddeo de Demonstra\u00e7\u00e3o Cobrasi Network\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"checkout-modal\" class=\"fixed inset-0 bg-slate-950\/60 z-[60] hidden backdrop-blur-sm flex items-center justify-center p-4\">\n <div class=\"bg-white rounded-3xl shadow-2xl w-full max-w-lg p-6 sm:p-8 transform scale-95 opacity-0 transition-all duration-300 flex flex-col max-h-[90vh]\">\n \n <div class=\"flex justify-between items-start mb-4 border-b border-slate-100 pb-3\">\n <div>\n <h3 class=\"text-xl font-black text-slate-900 tracking-tight\">Finalizar Or\u00e7amento<\/h3>\n <p class=\"text-xs text-slate-500 mt-1\">Conclua o preenchimento para sincronizar com sua planilha.<\/p>\n <\/div>\n <div class=\"flex flex-col items-end gap-1.5 shrink-0\">\n <button onclick=\"closeCheckoutModal()\" class=\"text-slate-400 hover:text-slate-600 p-1.5 rounded-lg hover:bg-slate-100 transition-colors\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"\/>\n <\/svg>\n <\/button>\n \n <span id=\"saving-indicator\" class=\"text-[9px] text-slate-400 font-bold flex items-center gap-1 bg-slate-100 px-2.5 py-1 rounded-lg border border-slate-200\/50\">\n <svg class=\"w-3 h-3 text-slate-400\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z\"\/>\n <\/svg>\n Nuvem Ativa\n <\/span>\n <\/div>\n <\/div>\n\n \n <div class=\"space-y-4 overflow-y-auto pr-1 flex-1\">\n \n \n <div>\n <label class=\"block text-xs font-bold text-slate-600 uppercase tracking-wider mb-1\">Nome da Empresa<\/label>\n <input type=\"text\" id=\"customer-company\" \n class=\"w-full bg-slate-50 border border-slate-300 rounded-xl px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-brand focus:border-brand transition-all text-sm font-semibold text-slate-800\" \n placeholder=\"Ex: Minha Empresa LTDA\">\n <\/div>\n \n \n <div>\n <label class=\"block text-xs font-bold text-slate-600 uppercase tracking-wider mb-1\">Telefone de Contato<\/label>\n <input type=\"tel\" id=\"customer-phone\" \n class=\"w-full bg-slate-50 border border-slate-300 rounded-xl px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-brand focus:border-brand transition-all text-sm font-semibold text-slate-800\" \n placeholder=\"Ex: +55 (11) 99999-9999\">\n <\/div>\n\n \n <div>\n <div class=\"flex flex-col sm:flex-row sm:justify-between sm:items-center gap-2 mb-1\">\n <label class=\"block text-xs font-bold text-slate-600 uppercase tracking-wider\">Endere\u00e7o de Contato \/ Localiza\u00e7\u00e3o<\/label>\n <button id=\"get-location-btn\" type=\"button\" onclick=\"getCurrentLocation()\" \n class=\"bg-blue-50 hover:bg-blue-100 text-brand px-2.5 py-1 rounded-lg text-[11px] font-bold flex items-center gap-1 border border-slate-200 transition-all active:scale-95\">\n <svg class=\"w-3.5 h-3.5\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\"\/>\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\"\/>\n <\/svg>\n Capturar pelo GPS\n <\/button>\n <\/div>\n <div class=\"space-y-2\">\n <textarea id=\"customer-address\" rows=\"2\" \n class=\"w-full bg-slate-50 border border-slate-300 rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-brand focus:border-brand transition-all text-xs text-slate-700\" \n placeholder=\"Endere\u00e7o obtido por GPS ou digite a rua\/bairro manualmente...\"><\/textarea>\n \n <div class=\"grid grid-cols-2 gap-2\">\n <div>\n <input type=\"text\" id=\"address-number\" \n class=\"w-full bg-slate-50 border border-slate-300 rounded-xl px-3 py-2 focus:outline-none focus:ring-2 focus:ring-brand focus:border-brand transition-all text-xs text-slate-700 font-semibold\" \n placeholder=\"N\u00ba da Casa \/ Pr\u00e9dio\">\n <\/div>\n <div>\n <input type=\"text\" id=\"building-name\" \n class=\"w-full bg-slate-50 border border-slate-300 rounded-xl px-3 py-2 focus:outline-none focus:ring-2 focus:ring-brand focus:border-brand transition-all text-xs text-slate-700 font-semibold\" \n placeholder=\"Edif\u00edcio \/ Bloco (opcional)\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div>\n <label class=\"block text-xs font-bold text-slate-700 uppercase tracking-wider mb-2\">Moeda de Cobran\u00e7a Preferencial<\/label>\n <div class=\"grid grid-cols-3 gap-2\">\n \n <label class=\"relative border border-slate-300 rounded-xl p-2.5 flex flex-col items-center justify-center cursor-pointer hover:bg-slate-50\/50 transition-all select-none bg-transparent\">\n <input type=\"radio\" name=\"payment-currency\" value=\"USD\" checked class=\"peer sr-only\" onchange=\"changePaymentCurrency('USD')\">\n <span class=\"absolute inset-0 rounded-xl border-2 border-transparent peer-checked:border-brand peer-checked:bg-brand\/5 pointer-events-none transition-all\"><\/span>\n <span class=\"font-bold text-xs text-slate-900 relative z-10\">USD ($)<\/span>\n <span class=\"text-[9px] text-slate-400 mt-0.5 relative z-10\">D\u00f3lar<\/span>\n <\/label>\n \n <label class=\"relative border border-slate-300 rounded-xl p-2.5 flex flex-col items-center justify-center cursor-pointer hover:bg-slate-50 transition-all select-none bg-white\">\n <input type=\"radio\" name=\"payment-currency\" value=\"JPY\" class=\"peer sr-only\" onchange=\"changePaymentCurrency('JPY')\">\n <span class=\"absolute inset-0 rounded-xl border-2 border-transparent peer-checked:border-brand peer-checked:bg-blue-50\/20 pointer-events-none transition-all\"><\/span>\n <span class=\"font-bold text-xs text-slate-900 relative z-10\">JPY (\u00a5)<\/span>\n <span class=\"text-[9px] text-slate-400 mt-0.5 relative z-10\">Iene<\/span>\n <\/label>\n \n <label class=\"relative border border-slate-300 rounded-xl p-2.5 flex flex-col items-center justify-center cursor-pointer hover:bg-slate-50 transition-all select-none bg-white\">\n <input type=\"radio\" name=\"payment-currency\" value=\"BRL\" class=\"peer sr-only\" onchange=\"changePaymentCurrency('BRL')\">\n <span class=\"absolute inset-0 rounded-xl border-2 border-transparent peer-checked:border-brand peer-checked:bg-blue-50\/20 pointer-events-none transition-all\"><\/span>\n <span class=\"font-bold text-xs text-slate-900 relative z-10\">BRL (R$)<\/span>\n <span class=\"text-[9px] text-slate-400 mt-0.5 relative z-10\">Real<\/span>\n <\/label>\n <\/div>\n\n \n <div class=\"mt-3\">\n <button type=\"button\" onclick=\"sendOrderAndRedirect()\" class=\"w-full bg-emerald-600 hover:bg-emerald-700 text-white font-extrabold py-3 px-4 rounded-xl text-center text-sm shadow-md shadow-emerald-600\/20 flex items-center justify-center gap-2 transition-all duration-300 hover:scale-[1.01] active:scale-[0.99]\">\n <svg class=\"w-4 h-4 animate-pulse text-emerald-100\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"\/>\n <\/svg>\n <span id=\"payment-today-button-text\">Pagamento Hoje: $0,00 USD<\/span>\n <\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-slate-50 rounded-2xl p-4 border border-slate-200 mt-2 text-xs shadow-inner\">\n <div class=\"flex items-center gap-1.5 font-bold text-slate-800 border-b border-slate-200 pb-2 mb-2\">\n <svg class=\"w-4 h-4 text-brand\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"\/>\n <\/svg>\n <span>Resumo do Or\u00e7amento Consolidado:<\/span>\n <\/div>\n \n \n <div id=\"summary-items-list\" class=\"space-y-1.5 text-slate-600\">\n \n <\/div>\n\n \n <div class=\"mt-3 pt-3 border-t border-slate-200 space-y-2\" id=\"summary-total-breakdown\">\n \n <\/div>\n <\/div>\n\n <\/div>\n\n \n <div class=\"mt-4 flex flex-col-reverse sm:flex-row gap-3 pt-3 border-t border-slate-100\">\n <button type=\"button\" onclick=\"closeCheckoutModal()\" \n class=\"w-full sm:flex-1 bg-slate-100 hover:bg-slate-200 text-slate-700 font-extrabold py-2.5 px-4 rounded-xl transition-all text-xs text-center border border-slate-200\">\n Voltar Ajustar\n <\/button>\n <button type=\"button\" id=\"confirm-order-btn\" onclick=\"sendOrderAndRedirect()\" \n class=\"w-full sm:flex-[2] bg-emerald-600 hover:bg-emerald-700 text-white font-extrabold py-2.5 px-4 rounded-xl transition-all flex items-center justify-center gap-2 shadow-md shadow-emerald-600\/10 text-xs\">\n <svg class=\"w-4 h-4\" fill=\"currentColor\" viewbox=\"0 0 24 24\">\n <path d=\"M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946C.06 5.348 5.397.01 12.008.01c3.202.001 6.212 1.246 8.477 3.514 2.266 2.268 3.507 5.28 3.505 8.484-.004 6.657-5.34 11.997-11.953 11.997-2.005-.001-3.973-.502-5.724-1.457L0 24zm6.59-4.846c1.6.95 3.488 1.449 5.414 1.451 5.508 0 9.99-4.447 9.993-9.904.002-2.645-1.026-5.131-2.895-7.001C17.288 1.83 14.8 1.8 12.013 1.8c-5.514 0-10 4.45-10.003 9.909-.001 1.895.498 3.745 1.445 5.358L2.4 21.64l4.247-1.486z\"\/>\n <\/svg>\n Salvar & Chamar WhatsApp\n <\/button>\n <\/div>\n\n <\/div>\n <\/div>\n\n \n <iframe name=\"google_sheets_iframe\" id=\"google_sheets_iframe\" class=\"hidden\" style=\"display: none;\"><\/iframe>\n <form id=\"google_sheets_form\" method=\"GET\" target=\"google_sheets_iframe\" class=\"hidden\" style=\"display: none;\" action=\"\">\n <input type=\"hidden\" name=\"dataHora\" id=\"sheet-dataHora\">\n <input type=\"hidden\" name=\"empresa\" id=\"sheet-empresa\">\n <input type=\"hidden\" name=\"contato\" id=\"sheet-contato\">\n <input type=\"hidden\" name=\"endereco\" id=\"sheet-endereco\">\n <input type=\"hidden\" name=\"numero\" id=\"sheet-numero\">\n <input type=\"hidden\" name=\"predio\" id=\"sheet-predio\">\n <input type=\"hidden\" name=\"pacote\" id=\"sheet-pacote\">\n <input type=\"hidden\" name=\"dominio\" id=\"sheet-dominio\">\n <input type=\"hidden\" name=\"registrarDominio\" id=\"sheet-registrarDominio\">\n <input type=\"hidden\" name=\"moedaPagamento\" id=\"sheet-moedaPagamento\">\n <input type=\"hidden\" name=\"total\" id=\"sheet-total\">\n <input type=\"hidden\" name=\"valorCobrado\" id=\"sheet-valorCobrado\">\n <input type=\"hidden\" name=\"trp-form-language\" value=\"ja\"\/><\/form>\n\n \n <div id=\"toast-container\" class=\"fixed bottom-28 left-1\/2 transform -translate-x-1\/2 z-[70] flex flex-col gap-2 pointer-events-none w-full max-w-sm px-4\"><\/div>\n\n \n <script type=\"module\">\n import { initializeApp } from \"https:\/\/www.gstatic.com\/firebasejs\/11.6.1\/firebase-app.js\";\n import { getAuth, signInAnonymously, signInWithCustomToken, onAuthStateChanged } from \"https:\/\/www.gstatic.com\/firebasejs\/11.6.1\/firebase-auth.js\";\n import { getFirestore, doc, setDoc, getDoc } from \"https:\/\/www.gstatic.com\/firebasejs\/11.6.1\/firebase-firestore.js\";\n\n \/\/ CONFIGURA\u00c7\u00d5ES GLOBAIS\n const WHATSAPP_NUMBER = '817012740701';\n const APPS_SCRIPT_WEBHOOK = 'https:\/\/script.google.com\/macros\/s\/AKfycbw9oj-G-IlsxURJMhges-rPpAMFcpfeDDEEM2o9AGwCLBalhjwTZ0M810M54POh2Ky90w\/exec'; \n\n \/\/ Inicializa\u00e7\u00e3o Segura do Firebase Firestore\n let db = null;\n let auth = null;\n let appId = 'cobrasi-budget-app';\n let currentUser = null;\n let firebaseInitialized = false;\n\n if (typeof __firebase_config !== 'undefined' && __firebase_config) {\n try {\n appId = typeof __app_id !== 'undefined' ? __app_id : 'cobrasi-budget-app';\n const firebaseConfig = JSON.parse(__firebase_config);\n const app = initializeApp(firebaseConfig);\n auth = getAuth(app);\n db = getFirestore(app);\n firebaseInitialized = true;\n console.log(\"Firebase inicializado.\");\n } catch (err) {\n console.error(\"Erro Firebase init:\", err);\n }\n }\n\n \/\/ Vari\u00e1veis de Controle Financeiro\n let exchangeRates = {\n USD: 1.0,\n JPY: 156.40,\n BRL: 5.45\n };\n\n const PLANS = {\n base: {\n id: 'base',\n name: 'AppSheet Subscription (Base)',\n price: 35.00,\n isPerUser: true,\n users: 1\n },\n integrated: {\n id: 'integrated',\n name: 'Pacote Integrado: AppSheet + WebSite',\n price: 90.00,\n isPerUser: false\n },\n premium: {\n id: 'premium',\n name: 'Pacote Premium: AppSheet + WebSite + Redes Sociais',\n price: 120.00,\n isPerUser: false\n }\n };\n\n const DOMAIN_PRICE_ANNUAL_USD = 29.00;\n\n let selectedPlanId = null;\n let selectedPaymentCurrency = 'USD';\n let selectedBillingPeriod = 'mensal'; \/\/ 'mensal' ou 'anual'\n \n let checkedDomainName = '';\n let isDomainAvailable = false;\n let wantToRegisterDomain = false;\n let selectedDomainYears = 1; \/\/ Padr\u00e3o: 1 ano de registro\n\n \/\/ Mecanismo de fallback caso a logo remota falhe\n window.handleLogoFallback = function() {\n const logoEl = document.getElementById('main-brand-logo');\n if (logoEl) {\n const parent = logoEl.parentElement;\n parent.innerHTML = `\n <div class=\"relative w-12 h-12 rounded-xl bg-gradient-to-br from-blue-600 to-indigo-700 flex items-center justify-center text-white font-black text-lg shadow-md border border-blue-500\">\n C\n <\/div>\n `;\n }\n }\n\n \/\/ --- SISTEMA DE MODAL DE V\u00cdDEO FLUTUANTE (YOUTUBE EMBED) ---\n function openVideoModal(event) {\n if (event) {\n event.stopPropagation(); \/\/ Evita ativar a sele\u00e7\u00e3o do plano ao clicar no bot\u00e3o de v\u00eddeo\n }\n const modal = document.getElementById('video-modal');\n const iframe = document.getElementById('video-iframe');\n \n \/\/ Link de v\u00eddeo convertido profissionalmente para formato embed do iframe\n iframe.src = \"https:\/\/www.youtube.com\/embed\/2MouJ_Nyjw4?autoplay=1&rel=0\";\n \n modal.classList.remove('hidden');\n setTimeout(() => {\n modal.querySelector('div').classList.remove('scale-95', 'opacity-0');\n }, 10);\n }\n\n function closeVideoModal() {\n const modal = document.getElementById('video-modal');\n const iframe = document.getElementById('video-iframe');\n \n modal.querySelector('div').classList.add('scale-95', 'opacity-0');\n setTimeout(() => {\n modal.classList.add('hidden');\n iframe.src = \"\"; \/\/ Pausa a reprodu\u00e7\u00e3o limpando a origem do iframe\n }, 300);\n }\n\n \/\/ --- SISTEMA DE PERSIST\u00caNCIA EM CLOUD FIRESTORE ---\n let saveTimeout = null;\n\n function queueDraftSave() {\n const indicator = document.getElementById('saving-indicator');\n if (indicator) {\n indicator.innerHTML = `\n <svg class=\"w-3 h-3 text-amber-500 animate-spin\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 1121.21 4H15V9\"\/>\n <\/svg>\n Sincronizando...\n `;\n }\n\n clearTimeout(saveTimeout);\n saveTimeout = setTimeout(() => {\n saveDraftToFirestore();\n }, 1000);\n }\n\n async function saveDraftToFirestore() {\n if (!firebaseInitialized || !currentUser) return;\n try {\n const draftData = {\n empresa: document.getElementById('customer-company').value,\n contato: document.getElementById('customer-phone').value,\n endereco: document.getElementById('customer-address').value,\n numero: document.getElementById('address-number').value,\n predio: document.getElementById('building-name').value,\n selectedPlanId: selectedPlanId,\n userCount: document.getElementById('user-count').value,\n selectedPaymentCurrency: selectedPaymentCurrency,\n selectedBillingPeriod: selectedBillingPeriod,\n checkedDomainName: checkedDomainName,\n isDomainAvailable: isDomainAvailable,\n wantToRegisterDomain: wantToRegisterDomain,\n selectedDomainYears: selectedDomainYears,\n lastUpdated: new Date().toISOString()\n };\n\n const docRef = doc(db, 'artifacts', appId, 'users', currentUser.uid, 'drafts', 'checkout');\n await setDoc(docRef, draftData);\n \n const indicator = document.getElementById('saving-indicator');\n if (indicator) {\n indicator.innerHTML = `\n <svg class=\"w-3 h-3 text-emerald-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"\/>\n <\/svg>\n Nuvem Ativa\n `;\n }\n } catch (err) {\n console.error(\"Erro Firestore setDoc:\", err);\n const indicator = document.getElementById('saving-indicator');\n if (indicator) {\n indicator.innerHTML = `\n <svg class=\"w-3 h-3 text-rose-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\/>\n <\/svg>\n Offline\n `;\n }\n }\n }\n\n async function loadDraftFromFirestore(uid) {\n if (!firebaseInitialized) return;\n try {\n const docRef = doc(db, 'artifacts', appId, 'users', uid, 'drafts', 'checkout');\n const docSnap = await getDoc(docRef);\n \n if (docSnap.exists()) {\n const data = docSnap.data();\n document.getElementById('customer-company').value = data.empresa || '';\n document.getElementById('customer-phone').value = data.contato || '';\n document.getElementById('customer-address').value = data.endereco || '';\n document.getElementById('address-number').value = data.numero || '';\n document.getElementById('building-name').value = data.predio || '';\n \n if (data.selectedBillingPeriod) {\n selectedBillingPeriod = data.selectedBillingPeriod;\n toggleBillingPeriodButtons();\n }\n if (data.selectedPlanId) {\n selectPackage(data.selectedPlanId);\n }\n if (data.userCount) {\n document.getElementById('user-count').value = data.userCount;\n PLANS.base.users = parseInt(data.userCount) || 1;\n }\n if (data.selectedPaymentCurrency) {\n selectedPaymentCurrency = data.selectedPaymentCurrency;\n syncCurrencyControls(data.selectedPaymentCurrency);\n }\n if (data.selectedDomainYears) {\n selectedDomainYears = data.selectedDomainYears || 1;\n }\n if (data.checkedDomainName) {\n checkedDomainName = data.checkedDomainName;\n document.getElementById('domain-input').value = data.checkedDomainName;\n isDomainAvailable = data.isDomainAvailable;\n wantToRegisterDomain = data.wantToRegisterDomain;\n renderDomainResult();\n }\n updateTotalUI();\n showToast(\"Prefer\u00eancias de or\u00e7amento recuperadas com seguran\u00e7a!\", false);\n }\n } catch (err) {\n console.error(\"Erro Firestore getDoc:\", err);\n }\n }\n\n async function clearDraftFromFirestore() {\n if (!firebaseInitialized || !currentUser) return;\n try {\n const docRef = doc(db, 'artifacts', appId, 'users', currentUser.uid, 'drafts', 'checkout');\n await setDoc(docRef, {});\n } catch (err) {\n console.error(\"Erro reset rascunho:\", err);\n }\n }\n\n \/\/ --- SISTEMA DE AUTENTICA\u00c7\u00c3O FIRESTORE ---\n async function initAuth() {\n if (!firebaseInitialized) return;\n try {\n if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {\n await signInWithCustomToken(auth, __initial_auth_token);\n } else {\n await signInAnonymously(auth);\n }\n } catch (err) {\n console.error(\"Erro Auth:\", err);\n }\n }\n\n if (firebaseInitialized) {\n initAuth();\n onAuthStateChanged(auth, (user) => {\n currentUser = user;\n if (user) {\n loadDraftFromFirestore(user.uid);\n }\n });\n }\n\n \/\/ Inicializa\u00e7\u00e3o de C\u00e2mbio & Interface\n fetchExchangeRates();\n updateTotalUI();\n\n \/\/ Vincula\u00e7\u00e3o de inputs para autossalvamento\n document.getElementById('customer-company').addEventListener('input', queueDraftSave);\n document.getElementById('customer-phone').addEventListener('input', queueDraftSave);\n document.getElementById('customer-address').addEventListener('input', queueDraftSave);\n document.getElementById('address-number').addEventListener('input', queueDraftSave);\n document.getElementById('building-name').addEventListener('input', queueDraftSave);\n\n \/\/ Captura de Taxas de C\u00e2mbio via Open API\n async function fetchExchangeRates() {\n const ticker = document.getElementById('ticker-rates');\n try {\n const response = await fetch('https:\/\/open.er-api.com\/v6\/latest\/USD');\n if (!response.ok) throw new Error(\"API Limit\");\n const data = await response.json();\n \n if (data && data.rates) {\n exchangeRates.JPY = data.rates.JPY || exchangeRates.JPY;\n exchangeRates.BRL = data.rates.BRL || exchangeRates.BRL;\n ticker.innerHTML = `\ud83d\udd25 C\u00e2mbio do Mercado: <strong>$1.00 USD<\/strong> = <span class=\"text-emerald-400 font-bold\">\u00a5${exchangeRates.JPY.toFixed(2)} JPY<\/span> | <span class=\"text-emerald-400 font-bold\">R$${exchangeRates.BRL.toFixed(2)} BRL<\/span>`;\n }\n } catch (err) {\n ticker.innerHTML = `\u26a0\ufe0f C\u00e2mbio Referencial Consolidado: 1 USD = \u00a5${exchangeRates.JPY.toFixed(2)} JPY | R$${exchangeRates.BRL.toFixed(2)} BRL`;\n }\n updateRatesInCards();\n }\n\n function updateRatesInCards() {\n const isYearly = selectedBillingPeriod === 'anual';\n const discount = isYearly ? 0.9 : 1.0;\n const multiplier = isYearly ? 12 : 1;\n\n \/\/ Plano 1 (Base)\n const basePriceUSD = PLANS.base.price * PLANS.base.users * discount;\n document.getElementById('base-price-display').innerHTML = isYearly\n ? `$${(PLANS.base.price * discount).toFixed(2)} USD <span class=\"text-xs font-normal text-slate-500\">\/m\u00eas ($${(basePriceUSD * 12).toFixed(2)}\/ano)<\/span>`\n : `$${basePriceUSD.toFixed(2)} USD <span class=\"text-xs font-normal text-slate-500\">\/m\u00eas<\/span>`;\n document.getElementById('base-price-jpy').textContent = `\u00a5${Math.round(basePriceUSD * multiplier * exchangeRates.JPY).toLocaleString('ja-JP')} JPY${isYearly ? '\/ano' : '\/m\u00eas'}`;\n document.getElementById('base-price-brl').textContent = `R$ ${(basePriceUSD * multiplier * exchangeRates.BRL).toFixed(2)} BRL${isYearly ? '\/ano' : '\/m\u00eas'}`;\n\n \/\/ Plano 2 (Integrated)\n const intPriceUSD = PLANS.integrated.price * discount;\n document.getElementById('integrated-price-display').innerHTML = isYearly\n ? `$${intPriceUSD.toFixed(2)} USD <span class=\"text-xs font-normal text-slate-500\">\/m\u00eas ($${(intPriceUSD * 12).toFixed(2)}\/ano)<\/span>`\n : `$${PLANS.integrated.price.toFixed(2)} USD <span class=\"text-xs font-normal text-slate-500\">\/m\u00eas<\/span>`;\n document.getElementById('integrated-price-jpy').textContent = `\u00a5${Math.round(intPriceUSD * multiplier * exchangeRates.JPY).toLocaleString('ja-JP')} JPY${isYearly ? '\/ano' : '\/m\u00eas'}`;\n document.getElementById('integrated-price-brl').textContent = `R$ ${(intPriceUSD * multiplier * exchangeRates.BRL).toFixed(2)} BRL${isYearly ? '\/ano' : '\/m\u00eas'}`;\n\n \/\/ Plano 3 (Premium)\n const premPriceUSD = PLANS.premium.price * discount;\n document.getElementById('premium-price-display').innerHTML = isYearly\n ? `$${premPriceUSD.toFixed(2)} USD <span class=\"text-xs font-normal text-slate-500\">\/m\u00eas ($${(premPriceUSD * 12).toFixed(2)}\/ano)<\/span>`\n : `$${PLANS.premium.price.toFixed(2)} USD <span class=\"text-xs font-normal text-slate-500\">\/m\u00eas<\/span>`;\n document.getElementById('premium-price-jpy').textContent = `\u00a5${Math.round(premPriceUSD * multiplier * exchangeRates.JPY).toLocaleString('ja-JP')} JPY${isYearly ? '\/ano' : '\/m\u00eas'}`;\n document.getElementById('premium-price-brl').textContent = `R$ ${(premPriceUSD * multiplier * exchangeRates.BRL).toFixed(2)} BRL${isYearly ? '\/ano' : '\/m\u00eas'}`;\n }\n\n \/\/ Verifica\u00e7\u00e3o de Dom\u00ednio com Moedas e Per\u00edodos\n async function checkDomainNetwork() {\n const input = document.getElementById('domain-input');\n const domain = input.value.trim().toLowerCase();\n const resultBox = document.getElementById('domain-result');\n const btn = document.getElementById('btn-check-domain');\n\n if (!domain) {\n showToast(\"Por favor, digite um dom\u00ednio de internet.\", true);\n return;\n }\n\n const domainRegex = \/^[a-z0-9]+([\\-\\.]{1}[a-z0-9]+)*\\.[a-z]{2,20}$\/;\n if (!domainRegex.test(domain)) {\n showToast(\"Formato de dom\u00ednio inv\u00e1lido (Exemplo: seuprojeto.com)\", true);\n return;\n }\n\n btn.disabled = true;\n const originalBtnText = btn.innerHTML;\n btn.innerHTML = `\n <svg class=\"animate-spin h-4 w-4 text-white mr-1 inline\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"><\/circle>\n <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"><\/path>\n <\/svg>\n Verificando...\n `;\n\n resultBox.classList.add('hidden');\n wantToRegisterDomain = false;\n\n try {\n const response = await fetch(`https:\/\/dns.google\/resolve?name=${domain}&type=A`);\n if (!response.ok) throw new Error(\"DNS API fail\");\n \n const data = await response.json();\n const available = (data.Status === 3); \/\/ NXDOMAIN indica dispon\u00edvel\n\n checkedDomainName = domain;\n isDomainAvailable = available;\n\n renderDomainResult();\n queueDraftSave();\n } catch (err) {\n setTimeout(() => {\n checkedDomainName = domain;\n isDomainAvailable = !domain.includes(\"google\") && !domain.includes(\"cobrasi\") && Math.random() > 0.4;\n renderDomainResult();\n queueDraftSave();\n }, 800);\n } finally {\n btn.innerHTML = originalBtnText;\n btn.disabled = false;\n }\n }\n\n function renderDomainResult() {\n const resultBox = document.getElementById('domain-result');\n resultBox.classList.remove('hidden');\n\n if (isDomainAvailable) {\n const price1_USD = DOMAIN_PRICE_ANNUAL_USD * 1;\n const price2_USD = DOMAIN_PRICE_ANNUAL_USD * 2;\n const price3_USD = DOMAIN_PRICE_ANNUAL_USD * 3;\n\n const price1_JPY = Math.round(price1_USD * exchangeRates.JPY);\n const price2_JPY = Math.round(price2_USD * exchangeRates.JPY);\n const price3_JPY = Math.round(price3_USD * exchangeRates.JPY);\n\n const price1_BRL = (price1_USD * exchangeRates.BRL).toFixed(2);\n const price2_BRL = (price2_USD * exchangeRates.BRL).toFixed(2);\n const price3_BRL = (price3_USD * exchangeRates.BRL).toFixed(2);\n\n resultBox.innerHTML = `\n <div class=\"p-6 bg-emerald-50\/60 border border-emerald-200 rounded-3xl mt-4 space-y-4\">\n <div class=\"flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2 pb-3 border-b border-emerald-100\">\n <div>\n <span class=\"text-emerald-800 font-black text-base block\">\u2705 O endere\u00e7o <span class=\"underline\">${checkedDomainName}<\/span> est\u00e1 livre!<\/span>\n <span class=\"text-xs text-emerald-600 font-medium\">Selecione o plano de anos ideal e adicione de forma simplificada ao seu or\u00e7amento.<\/span>\n <\/div>\n <label class=\"flex items-center gap-2 bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-2.5 px-4 rounded-xl text-xs cursor-pointer select-none transition-all duration-250 hover:scale-[1.02] shadow-md shadow-emerald-600\/10 shrink-0\">\n <input type=\"checkbox\" id=\"chk-reg-domain\" ${wantToRegisterDomain ? 'checked' : ''} onchange=\"toggleDomainRegisterSelection(this.checked)\" class=\"rounded text-emerald-600 focus:ring-emerald-500 w-4 h-4\">\n Adicionar ao Or\u00e7amento\n <\/label>\n <\/div>\n\n <div>\n <span class=\"block text-xs font-bold text-emerald-800 uppercase tracking-wider mb-2\">Selecione o per\u00edodo de registro preferido:<\/span>\n <div class=\"grid grid-cols-1 sm:grid-cols-3 gap-3\">\n <label class=\"relative border ${selectedDomainYears === 1 ? 'border-emerald-600 bg-white shadow-sm' : 'border-slate-200 bg-slate-50\/50'} rounded-2xl p-4 flex flex-col items-center justify-center cursor-pointer hover:bg-white transition-all select-none text-center\">\n <input type=\"radio\" name=\"domain-years\" value=\"1\" ${selectedDomainYears === 1 ? 'checked' : ''} onchange=\"changeDomainYears(1)\" class=\"peer sr-only\">\n <span class=\"font-extrabold text-xs text-slate-800\">1 Ano de Registro<\/span>\n <span class=\"text-[13px] text-emerald-700 font-black mt-1.5\">$${price1_USD.toFixed(2)} USD<\/span>\n <span class=\"text-[10px] text-slate-400 mt-1 leading-snug\">\n \u00a5 ${price1_JPY.toLocaleString('ja-JP')} JPY<br>\n R$ ${price1_BRL} BRL\n <\/span>\n <\/label>\n <label class=\"relative border ${selectedDomainYears === 2 ? 'border-emerald-600 bg-white shadow-sm' : 'border-slate-200 bg-slate-50\/50'} rounded-2xl p-4 flex flex-col items-center justify-center cursor-pointer hover:bg-white transition-all select-none text-center\">\n <input type=\"radio\" name=\"domain-years\" value=\"2\" ${selectedDomainYears === 2 ? 'checked' : ''} onchange=\"changeDomainYears(2)\" class=\"peer sr-only\">\n <span class=\"font-extrabold text-xs text-slate-800\">2 Anos de Registro<\/span>\n <span class=\"text-[13px] text-emerald-700 font-black mt-1.5\">$${price2_USD.toFixed(2)} USD<\/span>\n <span class=\"text-[10px] text-slate-400 mt-1 leading-snug\">\n \u00a5 ${price2_JPY.toLocaleString('ja-JP')} JPY<br>\n R$ ${price2_BRL} BRL\n <\/span>\n <\/label>\n <label class=\"relative border ${selectedDomainYears === 3 ? 'border-emerald-600 bg-white shadow-sm' : 'border-slate-200 bg-slate-50\/50'} rounded-2xl p-4 flex flex-col items-center justify-center cursor-pointer hover:bg-white transition-all select-none text-center\">\n <input type=\"radio\" name=\"domain-years\" value=\"3\" ${selectedDomainYears === 3 ? 'checked' : ''} onchange=\"changeDomainYears(3)\" class=\"peer sr-only\">\n <span class=\"font-extrabold text-xs text-slate-800\">3 Anos de Registro<\/span>\n <span class=\"text-[13px] text-emerald-700 font-black mt-1.5\">$${price3_USD.toFixed(2)} USD<\/span>\n <span class=\"text-[10px] text-slate-400 mt-1 leading-snug\">\n \u00a5 ${price3_JPY.toLocaleString('ja-JP')} JPY<br>\n R$ ${price3_BRL} BRL\n <\/span>\n <\/label>\n <\/div>\n <\/div>\n <\/div>\n `;\n } else {\n resultBox.innerHTML = `\n <div class=\"p-4 bg-rose-50 border border-rose-200 rounded-2xl\">\n <span class=\"text-rose-800 font-extrabold text-sm block\">\u274c O dom\u00ednio <span class=\"underline\">${checkedDomainName}<\/span> j\u00e1 est\u00e1 em uso.<\/span>\n <span class=\"text-xs text-rose-600 font-medium\">Caso j\u00e1 seja o propriet\u00e1rio desse dom\u00ednio, voc\u00ea poder\u00e1 apont\u00e1-lo para nossa estrutura de servidores gratuitamente.<\/span>\n <\/div>\n `;\n }\n updateTotalUI();\n }\n\n function changeDomainYears(years) {\n selectedDomainYears = parseInt(years);\n renderDomainResult();\n updateTotalUI();\n queueDraftSave();\n }\n\n function toggleDomainRegisterSelection(checked) {\n wantToRegisterDomain = checked;\n updateTotalUI();\n queueDraftSave();\n }\n\n \/\/ Altern\u00e2ncia de bot\u00f5es mensais \/ anuais\n function changeBillingPeriod(period) {\n selectedBillingPeriod = period;\n toggleBillingPeriodButtons();\n updateTotalUI();\n queueDraftSave();\n }\n\n function toggleBillingPeriodButtons() {\n const btnMonthly = document.getElementById('top-period-monthly');\n const btnYearly = document.getElementById('top-period-yearly');\n if (selectedBillingPeriod === 'anual') {\n btnMonthly.className = \"px-3.5 py-1.5 rounded-xl text-[10px] md:text-xs font-bold transition-all duration-300 focus:outline-none text-slate-600 hover:text-slate-900\";\n btnYearly.className = \"px-3.5 py-1.5 rounded-xl text-[10px] md:text-xs font-bold transition-all duration-300 focus:outline-none bg-brand text-white shadow-md\";\n } else {\n btnMonthly.className = \"px-3.5 py-1.5 rounded-xl text-[10px] md:text-xs font-bold transition-all duration-300 focus:outline-none bg-brand text-white shadow-md\";\n btnYearly.className = \"px-3.5 py-1.5 rounded-xl text-[10px] md:text-xs font-bold transition-all duration-300 focus:outline-none text-slate-600 hover:text-slate-900\";\n }\n }\n\n \/\/ Sele\u00e7\u00e3o de Pacotes\n function selectPackage(planId) {\n selectedPlanId = planId;\n if (planId === 'base') {\n const inputVal = parseInt(document.getElementById('user-count').value) || 1;\n PLANS.base.users = inputVal;\n }\n \n document.querySelectorAll('.package-card').forEach(card => {\n card.classList.remove('selected');\n const btn = card.querySelector('.select-btn');\n btn.textContent = \"Selecionar Plano\";\n btn.classList.remove('bg-brand', 'text-white', 'border-brand');\n btn.classList.add('bg-slate-100', 'text-slate-800', 'border-slate-200');\n });\n\n const activeCard = document.getElementById(`card-${planId}`);\n if (activeCard) {\n activeCard.classList.add('selected');\n const activeBtn = activeCard.querySelector('.select-btn');\n activeBtn.textContent = \"Selecionado\";\n activeBtn.classList.add('bg-brand', 'text-white', 'border-brand');\n activeBtn.classList.remove('bg-slate-100', 'text-slate-800', 'border-slate-200');\n }\n\n updateTotalUI();\n queueDraftSave();\n }\n\n function incrementUsers(e) {\n if (e) e.stopPropagation();\n const input = document.getElementById('user-count');\n let val = parseInt(input.value) || 1;\n input.value = val + 1;\n PLANS.base.users = val + 1;\n \n if (selectedPlanId !== 'base') selectPackage('base');\n updateTotalUI();\n queueDraftSave();\n }\n\n function decrementUsers(e) {\n if (e) e.stopPropagation();\n const input = document.getElementById('user-count');\n let val = parseInt(input.value) || 1;\n if (val > 1) {\n input.value = val - 1;\n PLANS.base.users = val - 1;\n \n if (selectedPlanId !== 'base') selectPackage('base');\n updateTotalUI();\n queueDraftSave();\n }\n }\n\n function updateUsersInput(val) {\n let intVal = parseInt(val) || 1;\n if (intVal < 1) intVal = 1;\n document.getElementById('user-count').value = intVal;\n PLANS.base.users = intVal;\n \n if (selectedPlanId !== 'base') selectPackage('base');\n updateTotalUI();\n queueDraftSave();\n }\n\n function changePaymentCurrency(currency) {\n selectedPaymentCurrency = currency;\n syncCurrencyControls(currency);\n\n if (checkedDomainName) {\n renderDomainResult();\n }\n\n updateCheckoutSummary();\n updateTotalUI();\n showToast(`Sua moeda preferencial de pagamento foi definida para: ${currency}`, false);\n queueDraftSave();\n }\n\n function syncCurrencyControls(currency) {\n ['USD', 'JPY', 'BRL'].forEach(curr => {\n const btn = document.getElementById(`top-currency-${curr}`);\n if (btn) {\n if (curr === currency) {\n btn.className = \"px-3 py-1.5 rounded-xl text-[10px] md:text-xs font-bold transition-all bg-white text-slate-900 shadow-md border border-slate-200\/40\";\n } else {\n btn.className = \"px-3 py-1.5 rounded-xl text-[10px] md:text-xs font-bold transition-all text-slate-500 hover:text-slate-800\";\n }\n }\n });\n }\n\n \/\/ Formata\u00e7\u00e3o profissional de moedas\n function formatVal(value, currency) {\n if (currency === 'USD') {\n return `$ ${value.toFixed(2)} USD`;\n } else if (currency === 'JPY') {\n return `\u00a5 ${Math.round(value).toLocaleString('ja-JP')} JPY`;\n } else if (currency === 'BRL') {\n return `R$ ${value.toFixed(2)} BRL`;\n }\n return `${value.toFixed(2)} ${currency}`;\n }\n\n function updateCheckoutSummary() {\n if (!selectedPlanId) return;\n \n const plan = PLANS[selectedPlanId];\n const itemsListEl = document.getElementById('summary-items-list');\n const totalBreakdownEl = document.getElementById('summary-total-breakdown');\n \n const isYearly = selectedBillingPeriod === 'anual';\n const discount = isYearly ? 0.9 : 1.0;\n const multiplier = isYearly ? 12 : 1;\n\n \/\/ 1. C\u00e1lculos do Plano\n const planUSD_perMonth = plan.isPerUser ? (plan.price * plan.users) : plan.price;\n const discountedPlanUSD_perMonth = planUSD_perMonth * discount;\n const finalPlanUSD_paidNow = discountedPlanUSD_perMonth * multiplier; \/\/ Valor do plano pago hoje\n\n const finalPlan_local = finalPlanUSD_paidNow * exchangeRates[selectedPaymentCurrency];\n\n \/\/ 2. C\u00e1lculos do Dom\u00ednio\n const domainUSD = (wantToRegisterDomain && checkedDomainName) ? (DOMAIN_PRICE_ANNUAL_USD * selectedDomainYears) : 0;\n const domain_local = domainUSD * exchangeRates[selectedPaymentCurrency];\n\n \/\/ 3. Consolida\u00e7\u00e3o Totais (Hoje e Pr\u00f3ximo)\n const grandUSD_Today = finalPlanUSD_paidNow + domainUSD;\n const grandLocal_Today = finalPlan_local + domain_local;\n\n \/\/ O pr\u00f3ximo pagamento exclui o valor de contrata\u00e7\u00e3o do dom\u00ednio\n const grandUSD_Next = finalPlanUSD_paidNow;\n const grandLocal_Next = finalPlan_local;\n\n \/\/ Renderizando Itens Discriminados\n let itemsHTML = `\n <div class=\"flex justify-between items-start gap-2\">\n <span>\u2022 <strong>Plano:<\/strong> ${plan.name} ${plan.isPerUser ? `(${plan.users} usu\u00e1rio${plan.users > 1 ? 's' : ''})` : ''}<\/span>\n <span class=\"font-semibold text-slate-800\">${formatVal(finalPlan_local, selectedPaymentCurrency)}<\/span>\n <\/div>\n <div class=\"text-[11px] text-brand font-bold pl-3 flex items-center gap-1\">\n <svg class=\"w-3.5 h-3.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z\"\/>\n <\/svg>\n Ciclo de Cobran\u00e7a do Plano: ${isYearly ? 'Anual (10% de Desconto Incluso)' : 'Mensal'}\n <\/div>\n `;\n\n if (wantToRegisterDomain && checkedDomainName) {\n itemsHTML += `\n <div class=\"flex justify-between items-start gap-2 pt-1 border-t border-dashed border-slate-200 mt-1\">\n <span>\u2022 <strong>Servi\u00e7o Adicional:<\/strong> Registro de Dom\u00ednio (${checkedDomainName})<\/span>\n <span class=\"font-semibold text-emerald-700\">${formatVal(domain_local, selectedPaymentCurrency)}<\/span>\n <\/div>\n <div class=\"text-[11px] text-emerald-600 font-semibold pl-3 flex items-center gap-1\">\n <svg class=\"w-3.5 h-3.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"\/>\n <\/svg>\n Registro do Dom\u00ednio: ${selectedDomainYears} Ano${selectedDomainYears > 1 ? 's' : ''} (Cobran\u00e7a Anual)\n <\/div>\n `;\n }\n\n itemsListEl.innerHTML = itemsHTML;\n\n \/\/ Renderizando Demonstrativo de Valores Finais\n totalBreakdownEl.innerHTML = `\n <div class=\"bg-blue-50\/40 rounded-xl p-3 border border-blue-100 flex flex-col gap-1.5\">\n <div class=\"flex justify-between items-center\">\n <span class=\"text-[10px] text-slate-500 font-extrabold uppercase tracking-wider\">Pagamento Hoje:<\/span>\n <span class=\"text-base font-black text-emerald-700\">${formatVal(grandLocal_Today, selectedPaymentCurrency)}<\/span>\n <\/div>\n <div class=\"text-[9px] text-slate-400 font-medium\">\n *Valor total consolidado a ser liquidado hoje para ativa\u00e7\u00e3o integrada do projeto.\n <\/div>\n <\/div>\n\n <div class=\"bg-slate-100 rounded-xl p-3 border border-slate-200 flex flex-col gap-1.5 mt-2\">\n <div class=\"flex justify-between items-center\">\n <span class=\"text-[10px] text-slate-500 font-extrabold uppercase tracking-wider\">Pr\u00f3ximo Pagamento:<\/span>\n <span class=\"text-sm font-bold text-slate-800\">${formatVal(grandLocal_Next, selectedPaymentCurrency)}<\/span>\n <\/div>\n <div class=\"text-[9px] text-slate-500 font-medium flex items-center gap-1\">\n <svg class=\"w-3 h-3 text-brand\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\/>\n <\/svg>\n <span>Pr\u00f3xima cobran\u00e7a recorrente do plano (em ${isYearly ? '1 ano' : '30 dias'}), excluindo a contrata\u00e7\u00e3o do dom\u00ednio.<\/span>\n <\/div>\n <\/div>\n\n <div class=\"text-[8px] text-slate-400 mt-2 text-center tracking-wide uppercase font-bold\">\n Cota\u00e7\u00e3o referencial: $ 1.00 USD = \u00a5 ${exchangeRates.JPY.toFixed(2)} JPY | R$ ${exchangeRates.BRL.toFixed(2)} BRL\n <\/div>\n `;\n\n \/\/ Atualiza o texto do bot\u00e3o verde de destaque de checkout com o valor consolidado de hoje\n const payTodayBtnText = document.getElementById('payment-today-button-text');\n if (payTodayBtnText) {\n payTodayBtnText.textContent = `Pagamento Hoje: ${formatVal(grandLocal_Today, selectedPaymentCurrency)}`;\n }\n }\n\n \/\/ Atualiza\u00e7\u00e3o de Valores no Rodap\u00e9 de Compra\n function updateTotalUI() {\n updateRatesInCards();\n\n let planUSD = 0;\n if (selectedPlanId) {\n const plan = PLANS[selectedPlanId];\n planUSD = plan.isPerUser ? (plan.price * plan.users) : plan.price;\n }\n\n const isYearly = selectedBillingPeriod === 'anual';\n const discount = isYearly ? 0.9 : 1.0;\n const multiplier = isYearly ? 12 : 1;\n\n const discountedPlanUSD = planUSD * discount;\n const finalPlanUSD = discountedPlanUSD * multiplier;\n const planJPY = Math.round(discountedPlanUSD * multiplier * exchangeRates.JPY);\n const planBRL = discountedPlanUSD * multiplier * exchangeRates.BRL;\n\n const domainUSD = (wantToRegisterDomain && checkedDomainName) ? (DOMAIN_PRICE_ANNUAL_USD * selectedDomainYears) : 0;\n const domainJPY = Math.round(domainUSD * exchangeRates.JPY);\n const domainBRL = domainUSD * exchangeRates.BRL;\n\n const grandTotalUSD = finalPlanUSD + domainUSD;\n const grandTotalJPY = planJPY + domainJPY;\n const grandTotalBRL = planBRL + domainBRL;\n\n const isUSD = selectedPaymentCurrency === 'USD';\n const isJPY = selectedPaymentCurrency === 'JPY';\n const isBRL = selectedPaymentCurrency === 'BRL';\n\n const hUSD = document.getElementById('header-val-usd');\n const hJPY = document.getElementById('header-val-jpy');\n const hBRL = document.getElementById('header-val-brl');\n\n if (hUSD) {\n hUSD.textContent = `USD: $${grandTotalUSD.toFixed(2)}`;\n hUSD.className = isUSD \n ? \"px-2 py-0.5 rounded-md border border-brand\/35 bg-brand\/5 text-brand shadow-sm font-extrabold\" \n : \"px-2 py-0.5 rounded-md border border-slate-200\/80 bg-slate-50 text-slate-400 font-medium\";\n }\n if (hJPY) {\n hJPY.textContent = `JPY: \u00a5${grandTotalJPY.toLocaleString('ja-JP')}`;\n hJPY.className = isJPY \n ? \"px-2 py-0.5 rounded-md border border-brand\/35 bg-brand\/5 text-brand shadow-sm font-extrabold\" \n : \"px-2 py-0.5 rounded-md border border-slate-200\/80 bg-slate-50 text-slate-400 font-medium\";\n }\n if (hBRL) {\n hBRL.textContent = `BRL: R$ ${grandTotalBRL.toFixed(2)}`;\n hBRL.className = isBRL \n ? \"px-2 py-0.5 rounded-md border border-brand\/35 bg-brand\/5 text-brand shadow-sm font-extrabold\" \n : \"px-2 py-0.5 rounded-md border border-slate-200\/80 bg-slate-50 text-slate-400 font-medium\";\n }\n\n let finalUSD_Text = `$${finalPlanUSD.toFixed(2)} USD`;\n let finalJPY_Text = `\u00a5${planJPY.toLocaleString('ja-JP')} JPY`;\n let finalBRL_Text = `R$ ${planBRL.toFixed(2)} BRL`;\n\n if (wantToRegisterDomain && checkedDomainName) {\n finalUSD_Text = `$${grandTotalUSD.toFixed(2)} USD <span class=\"text-[9px] font-normal text-slate-400 block sm:inline\">(Plano ${isYearly ? 'Anual' : 'Mensal'} + Dom\u00ednio ${selectedDomainYears} Ano${selectedDomainYears > 1 ? 's' : ''})<\/span>`;\n finalJPY_Text = `\u00a5${grandTotalJPY.toLocaleString('ja-JP')} JPY <span class=\"text-[9px] font-normal text-slate-400 block sm:inline\">(Plano + Dom\u00ednio)<\/span>`;\n finalBRL_Text = `R$ ${grandTotalBRL.toFixed(2)} BRL <span class=\"text-[9px] font-normal text-slate-400 block sm:inline\">(Plano + Dom\u00ednio)<\/span>`;\n } else {\n finalUSD_Text = `$${grandTotalUSD.toFixed(2)} USD <span class=\"text-[9px] font-normal text-slate-400 block sm:inline\">(${isYearly ? 'faturamento anual' : 'faturamento mensal'})<\/span>`;\n }\n\n document.getElementById('cart-total-usd').innerHTML = finalUSD_Text;\n document.getElementById('cart-total-jpy').innerHTML = finalJPY_Text;\n document.getElementById('cart-total-brl').innerHTML = finalBRL_Text;\n\n const chkBtn = document.getElementById('checkout-btn');\n const isEnable = planUSD > 0;\n \n if (chkBtn) {\n chkBtn.disabled = !isEnable;\n if (isEnable) {\n chkBtn.classList.remove('bg-slate-300', 'text-slate-500', 'cursor-not-allowed');\n chkBtn.classList.add('bg-emerald-600', 'hover:bg-emerald-700', 'text-white', 'cursor-pointer');\n } else {\n chkBtn.classList.add('bg-slate-300', 'text-slate-500', 'cursor-not-allowed');\n chkBtn.classList.remove('bg-emerald-600', 'hover:bg-emerald-700', 'text-white', 'cursor-pointer');\n }\n }\n }\n\n function openCheckoutModal() {\n if (!selectedPlanId) return;\n updateCheckoutSummary();\n\n const modal = document.getElementById('checkout-modal');\n modal.classList.remove('hidden');\n setTimeout(() => {\n modal.querySelector('div').classList.remove('scale-95', 'opacity-0');\n }, 10);\n }\n\n function closeCheckoutModal() {\n const modal = document.getElementById('checkout-modal');\n modal.querySelector('div').classList.add('scale-95', 'opacity-0');\n setTimeout(() => {\n modal.classList.add('hidden');\n }, 300);\n }\n\n \/\/ Geolocaliza\u00e7\u00e3o Reversa Nominatim\n function getCurrentLocation() {\n const btn = document.getElementById('get-location-btn');\n const originalText = btn.innerHTML;\n\n if (!(\"geolocation\" in navigator)) {\n showToast(\"Seu dispositivo ou navegador n\u00e3o suporta geolocaliza\u00e7\u00e3o.\", true);\n return;\n }\n\n btn.disabled = true;\n btn.innerHTML = `\n <svg class=\"animate-spin h-3.5 w-3.5 text-brand mr-1\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 1121.21 4H15V9\"\/>\n <\/svg>\n Resolvendo endere\u00e7o...\n `;\n\n navigator.geolocation.getCurrentPosition(async (position) => {\n const lat = position.coords.latitude;\n const lon = position.coords.longitude;\n \n try {\n const response = await fetch(`https:\/\/nominatim.openstreetmap.org\/reverse?format=json&lat=${lat}&lon=${lon}&zoom=18&addressdetails=1`);\n const data = await response.json();\n \n if (data && data.display_name) {\n document.getElementById('customer-address').value = data.display_name;\n if (data.address && data.address.house_number) {\n document.getElementById('address-number').value = data.address.house_number;\n }\n showToast(\"Localiza\u00e7\u00e3o GPS sincronizada com sucesso!\", false);\n queueDraftSave();\n } else {\n document.getElementById('customer-address').value = `Latitude: ${lat}, Longitude: ${lon}`;\n showToast(\"GPS obtido, mas sem endere\u00e7o resolvido.\", false);\n queueDraftSave();\n }\n } catch (err) {\n document.getElementById('customer-address').value = `Latitude: ${lat}, Longitude: ${lon}`;\n showToast(\"GPS capturado localmente.\", false);\n queueDraftSave();\n } finally {\n btn.innerHTML = originalText;\n btn.disabled = false;\n }\n }, (error) => {\n showToast(\"Erro ao obter GPS: \" + error.message, true);\n btn.innerHTML = originalText;\n btn.disabled = false;\n }, { timeout: 8000 });\n }\n\n function sendOrderAndRedirect() {\n const empresa = document.getElementById('customer-company').value.trim();\n const contato = document.getElementById('customer-phone').value.trim();\n const endereco = document.getElementById('customer-address').value.trim();\n const numero = document.getElementById('address-number').value.trim();\n const predio = document.getElementById('building-name').value.trim();\n\n if (!empresa) {\n showToast(\"Por favor, preencha o Nome da Empresa.\", true);\n return;\n }\n if (!contato) {\n showToast(\"Por favor, insira um Telefone de Contato.\", true);\n return;\n }\n if (!endereco) {\n showToast(\"Por favor, preencha o endere\u00e7o.\", true);\n return;\n }\n\n const plan = PLANS[selectedPlanId];\n let planText = plan.name;\n let totalPlanUSD = plan.price;\n if (plan.isPerUser) {\n totalPlanUSD = plan.price * plan.users;\n planText += ` (${plan.users} usu\u00e1rio${plan.users > 1 ? 's' : ''})`;\n }\n\n const isYearly = selectedBillingPeriod === 'anual';\n const discount = isYearly ? 0.9 : 1.0;\n const multiplier = isYearly ? 12 : 1;\n\n const discountedPlanUSD = totalPlanUSD * discount;\n const finalPlanUSD = discountedPlanUSD * multiplier;\n\n const totalPlanJPY = Math.round(discountedPlanUSD * multiplier * exchangeRates.JPY);\n const totalPlanBRL = discountedPlanUSD * multiplier * exchangeRates.BRL;\n\n const domainUSD = (wantToRegisterDomain && checkedDomainName) ? (DOMAIN_PRICE_ANNUAL_USD * selectedDomainYears) : 0;\n const domainJPY = Math.round(domainUSD * exchangeRates.JPY);\n const domainBRL = domainUSD * exchangeRates.BRL;\n\n const grandUSD = finalPlanUSD + domainUSD;\n const grandJPY = totalPlanJPY + domainJPY;\n const grandBRL = totalPlanBRL + domainBRL;\n\n const infoDominio = checkedDomainName || 'Nenhum';\n const querRegistrar = (isDomainAvailable && wantToRegisterDomain) ? `Sim (por ${selectedDomainYears} Ano${selectedDomainYears > 1 ? 's' : ''})` : 'N\u00e3o';\n\n let valueText = '';\n let planValueText = '';\n\n let localGrand_Today = 0;\n let localGrand_Next = 0;\n\n if (selectedPaymentCurrency === 'USD') {\n planValueText = `$${finalPlanUSD.toFixed(2)} USD (${isYearly ? 'Ano - Desconto de 10% Incluso' : 'M\u00eas'})`;\n valueText = `$${grandUSD.toFixed(2)} USD`;\n if (wantToRegisterDomain && checkedDomainName) valueText += ` ($${finalPlanUSD.toFixed(2)} Plano + $${domainUSD.toFixed(2)} Dom\u00ednio)`;\n localGrand_Today = grandUSD;\n localGrand_Next = finalPlanUSD;\n } else if (selectedPaymentCurrency === 'JPY') {\n planValueText = `\u00a5${totalPlanJPY.toLocaleString('ja-JP')} JPY (${isYearly ? 'Ano - Desconto de 10% Incluso' : 'M\u00eas'})`;\n valueText = `\u00a5${grandJPY.toLocaleString('ja-JP')} JPY`;\n if (wantToRegisterDomain && checkedDomainName) valueText += ` (\u00a5${totalPlanJPY.toLocaleString('ja-JP')} Plano + \u00a5${domainJPY.toLocaleString('ja-JP')} Dom\u00ednio)`;\n localGrand_Today = grandJPY;\n localGrand_Next = totalPlanJPY;\n } else if (selectedPaymentCurrency === 'BRL') {\n planValueText = `R$ ${totalPlanBRL.toFixed(2)} BRL (${isYearly ? 'Ano - Desconto de 10% Incluso' : 'M\u00eas'})`;\n valueText = `R$ ${grandBRL.toFixed(2)} BRL`;\n if (wantToRegisterDomain && checkedDomainName) valueText += ` (R$ ${totalPlanBRL.toFixed(2)} Plano + R$ ${domainBRL.toFixed(2)} Dom\u00ednio)`;\n localGrand_Today = grandBRL;\n localGrand_Next = totalPlanBRL;\n }\n\n const payload = {\n dataHora: new Date().toLocaleString('pt-BR'),\n empresa: empresa,\n contato: contato,\n endereco: endereco,\n numero: numero || 'Manual\/Nenhum',\n predio: predio || 'Manual\/Nenhum',\n pacote: planText + ` - Faturamento ${isYearly ? 'Anual (10% Desc.)' : 'Mensal'}`,\n dominio: infoDominio,\n registrarDominio: querRegistrar,\n moedaPagamento: selectedPaymentCurrency,\n total: `$${grandUSD.toFixed(2)} USD (\u00a5${grandJPY.toLocaleString('ja-JP')} JPY \/ R$ ${grandBRL.toFixed(2)} BRL)`,\n valorCobrado: valueText\n };\n\n \/\/ Envio Oculto e Blindado de Formul\u00e1rio para Google Sheets\n if (APPS_SCRIPT_WEBHOOK && APPS_SCRIPT_WEBHOOK.startsWith('http')) {\n try {\n document.getElementById('sheet-dataHora').value = payload.dataHora;\n document.getElementById('sheet-empresa').value = payload.empresa;\n document.getElementById('sheet-contato').value = payload.contato;\n document.getElementById('sheet-endereco').value = payload.endereco;\n document.getElementById('sheet-numero').value = payload.numero;\n document.getElementById('sheet-predio').value = payload.predio;\n document.getElementById('sheet-pacote').value = payload.pacote;\n document.getElementById('sheet-dominio').value = payload.dominio;\n document.getElementById('sheet-registrarDominio').value = payload.registrarDominio;\n document.getElementById('sheet-moedaPagamento').value = payload.moedaPagamento;\n document.getElementById('sheet-total').value = payload.total;\n document.getElementById('sheet-valorCobrado').value = payload.valorCobrado;\n\n const form = document.getElementById('google_sheets_form');\n form.action = APPS_SCRIPT_WEBHOOK;\n form.submit();\n console.log(\"Formul\u00e1rio Google Sheets enviado.\");\n } catch (formError) {\n console.error(\"Falha ao registrar em Planilha:\", formError);\n }\n }\n\n \/\/ Limpa o rascunho do Firestore\n clearDraftFromFirestore();\n\n \/\/ Formata\u00e7\u00e3o altamente profissional do conte\u00fado para o WhatsApp (Sem abrir nova aba, prevenindo popup blockers)\n let waMsg = `*OR\u00c7AMENTO CONSOLIDADO - COBRASI NETWORK*%0A%0A`;\n waMsg += `\ud83c\udfe2 *Empresa:* ${empresa}%0A`;\n waMsg += `\ud83d\udcde *Contato:* ${contato}%0A`;\n waMsg += `\ud83d\udccd *Endere\u00e7o:* ${endereco}%0A`;\n if (numero) waMsg += `\ud83d\udd22 *N\u00ba Casa\/Pr\u00e9dio:* ${numero}%0A`;\n if (predio) waMsg += `\ud83c\udfe2 *Nome Edif\u00edcio:* ${predio}%0A`;\n waMsg += `%0A*--- DETALHES DO PEDIDO ---*%0A`;\n waMsg += `\ud83d\udce6 *Plano:* ${planText}%0A`;\n waMsg += `\ud83d\udcc5 *Ciclo de Cobran\u00e7a do Plano:* ${isYearly ? 'ANUAL (10% DESC. INCLUSO)' : 'MENSAL'}%0A`;\n \n if (checkedDomainName) {\n waMsg += `\ud83c\udf10 *Dom\u00ednio Solicitado:* ${checkedDomainName}%0A`;\n waMsg += `\ud83d\udcdd *Contratar Registro Conosco?:* ${querRegistrar}%0A`;\n if (wantToRegisterDomain) {\n waMsg += `\ud83d\udcc5 *Ciclo de Cobran\u00e7a do Dom\u00ednio:* ANUAL (${selectedDomainYears} Ano${selectedDomainYears > 1 ? 's' : ''} de Registro)%0A`;\n }\n }\n \n waMsg += `%0A*--- FLUXO FINANCEIRO ---*%0A`;\n waMsg += `\ud83d\udcb5 *Moeda de Cobran\u00e7a Escolhida:* ${selectedPaymentCurrency}%0A`;\n waMsg += `\ud83d\udd25 *PAGAMENTO HOJE:* ${formatVal(localGrand_Today, selectedPaymentCurrency)}%0A`;\n waMsg += `\u23f3 *PR\u00d3XIMO PAGAMENTO:* ${formatVal(localGrand_Next, selectedPaymentCurrency)} (referente apenas ao plano recorrente em ${isYearly ? '1 ano' : '30 dias'})%0A%0A`;\n \n waMsg += `_Valores de Refer\u00eancia Totais (Convers\u00e3o Direta):_%0A`;\n waMsg += `\u2022 $ ${grandUSD.toFixed(2)} USD%0A`;\n waMsg += `\u2022 \u00a5 ${grandJPY.toLocaleString('ja-JP')} JPY%0A`;\n waMsg += `\u2022 R$ ${grandBRL.toFixed(2)} BRL%0A%0A`;\n waMsg += `_Sincroniza\u00e7\u00e3o em nuvem e planilha ativa._`;\n\n const waURL = `https:\/\/api.whatsapp.com\/send?phone=${WHATSAPP_NUMBER}&text=${waMsg}`;\n \n showToast(\"Or\u00e7amento Salvo! Redirecionando para o WhatsApp...\", false);\n \n setTimeout(() => {\n window.location.href = waURL;\n closeCheckoutModal();\n }, 1000);\n }\n\n function showToast(text, isError = false) {\n const container = document.getElementById('toast-container');\n const toast = document.createElement('div');\n \n toast.className = `transform translate-y-10 opacity-0 transition-all duration-300 rounded-2xl px-4 py-3.5 text-xs font-bold shadow-2xl flex items-center gap-2.5 pointer-events-auto ${\n isError ? 'bg-rose-600 text-white border border-rose-500' : 'bg-slate-900 text-white border border-slate-800'\n }`;\n \n const icon = isError \n ? `<svg class=\"w-4 h-4 text-rose-300\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\/><\/svg>` \n : `<svg class=\"w-4 h-4 text-emerald-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"\/><\/svg>`;\n\n toast.innerHTML = `${icon} <span>${text}<\/span>`;\n container.appendChild(toast);\n \n setTimeout(() => {\n toast.classList.remove('translate-y-10', 'opacity-0');\n }, 10);\n\n setTimeout(() => {\n toast.classList.add('translate-y-10', 'opacity-0');\n setTimeout(() => toast.remove(), 300);\n }, 4000);\n }\n\n \/\/ Vincula\u00e7\u00e3o Global Segura de M\u00f3dulos para Eventos do Navegador (Window Binding)\n window.selectPackage = selectPackage;\n window.incrementUsers = incrementUsers;\n window.decrementUsers = decrementUsers;\n window.updateUsersInput = updateUsersInput;\n window.changePaymentCurrency = changePaymentCurrency;\n window.changeBillingPeriod = changeBillingPeriod;\n window.checkDomainNetwork = checkDomainNetwork;\n window.toggleDomainRegisterSelection = toggleDomainRegisterSelection;\n window.changeDomainYears = changeDomainYears;\n window.openCheckoutModal = openCheckoutModal;\n window.closeCheckoutModal = closeCheckoutModal;\n window.getCurrentLocation = getCurrentLocation;\n window.sendOrderAndRedirect = sendOrderAndRedirect;\n window.openVideoModal = openVideoModal;\n window.closeVideoModal = closeVideoModal;\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Calculadora de Or\u00e7amento – Cobrasi Network C\u00e2mbio de Hoje (Base USD): Carregando taxas de c\u00e2mbio… Painel Integrado Cobrasi Network Total do Or\u00e7amento Escolhido $0,00 USD \/m\u00eas \u00a50 JPY R$0,00 BRL Mensal Anual -10% USD JPY BRL USD: $0.00 JPY: \u00a50 BRL: R$0.00 Avan\u00e7ar & Preencher Dados COBRASI NETWORK Sistemas Inteligentes & Integra\u00e7\u00f5es Precisa de assist\u00eancia t\u00e9cnica? Falar com Consultor Simulador de Or\u00e7amentos Escolha a Solu\u00e7\u00e3o Ideal para seu Neg\u00f3cio Selecione o plano desejado abaixo. Ajuste suas prefer\u00eancias de faturamento e moedas diretamente no painel de controle superior fixo. Etapa Recomendada Deseja um dom\u00ednio personalizado para seu projeto? Verificamos na hora a disponibilidade de registro do endere\u00e7o de web que voc\u00ea […]<\/p>","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_joinchat":[],"footnotes":""},"class_list":["post-3080","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cobrasi.com.br\/ja\/wp-json\/wp\/v2\/pages\/3080","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cobrasi.com.br\/ja\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cobrasi.com.br\/ja\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cobrasi.com.br\/ja\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/cobrasi.com.br\/ja\/wp-json\/wp\/v2\/comments?post=3080"}],"version-history":[{"count":85,"href":"https:\/\/cobrasi.com.br\/ja\/wp-json\/wp\/v2\/pages\/3080\/revisions"}],"predecessor-version":[{"id":3176,"href":"https:\/\/cobrasi.com.br\/ja\/wp-json\/wp\/v2\/pages\/3080\/revisions\/3176"}],"wp:attachment":[{"href":"https:\/\/cobrasi.com.br\/ja\/wp-json\/wp\/v2\/media?parent=3080"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}