{"id":13673,"date":"2026-04-28T14:10:48","date_gmt":"2026-04-28T14:10:48","guid":{"rendered":"https:\/\/vectora.ar\/?page_id=13673"},"modified":"2026-04-28T21:55:23","modified_gmt":"2026-04-28T21:55:23","slug":"odontosist","status":"publish","type":"page","link":"https:\/\/vectora.ar\/en\/odontosist\/","title":{"rendered":"OdontoSist"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nOdontoSist \u2014 Sistema de Gesti\u00f3n Odontol\u00f3gica de Vanguardia<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n :root {\r\n --c-bg: #050a0f;\r\n --c-surface: #0c1620;\r\n --c-surface2: #111d2a;\r\n --c-border: rgba(0,210,180,0.12);\r\n --c-border2: rgba(0,210,180,0.25);\r\n --c-cyan: #00d2b4;\r\n --c-cyan2: #00f5d4;\r\n --c-cyan-dim: rgba(0,210,180,0.08);\r\n --c-cyan-glow: rgba(0,210,180,0.15);\r\n --c-text: #e8f4f0;\r\n --c-muted: #6b8a99;\r\n --c-muted2: #94b8c8;\r\n --c-white: #ffffff;\r\n --c-accent: #ff6b6b;\r\n --c-accent2: #ffd166;\r\n --c-blue: #4da6ff;\r\n --r: 12px;\r\n --r2: 20px;\r\n }\r\n\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n html { scroll-behavior: smooth; }\r\n\r\n body {\r\n font-family: 'DM Sans', sans-serif;\r\n background: var(--c-bg);\r\n color: var(--c-text);\r\n line-height: 1.65;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* \u2500\u2500 NOISE TEXTURE overlay \u2500\u2500 *\/\r\n body::before {\r\n content: '';\r\n position: fixed;\r\n inset: 0;\r\n background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'\/%3E%3C\/svg%3E\");\r\n pointer-events: none;\r\n z-index: 0;\r\n opacity: 0.4;\r\n }\r\n\r\n .container { max-width: 1160px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }\r\n\r\n \/* \u2500\u2500 NAV \u2500\u2500 *\/\r\n nav {\r\n position: fixed;\r\n top: 0; left: 0; right: 0;\r\n z-index: 100;\r\n padding: 18px 0;\r\n transition: background 0.3s, backdrop-filter 0.3s;\r\n }\r\n nav.scrolled {\r\n background: rgba(5,10,15,0.85);\r\n backdrop-filter: blur(20px);\r\n border-bottom: 1px solid var(--c-border);\r\n }\r\n .nav-inner {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n max-width: 1160px;\r\n margin: 0 auto;\r\n padding: 0 24px;\r\n }\r\n .nav-logo {\r\n font-family: 'Syne', sans-serif;\r\n font-weight: 800;\r\n font-size: 1.35rem;\r\n color: var(--c-white);\r\n letter-spacing: -0.02em;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n text-decoration: none;\r\n }\r\n .nav-logo span { color: var(--c-cyan); }\r\n .logo-icon {\r\n width: 34px; height: 34px;\r\n background: var(--c-cyan-dim);\r\n border: 1px solid var(--c-border2);\r\n border-radius: 8px;\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 18px;\r\n }\r\n .nav-links {\r\n display: flex;\r\n gap: 32px;\r\n list-style: none;\r\n }\r\n .nav-links a {\r\n color: var(--c-muted2);\r\n text-decoration: none;\r\n font-size: 0.92rem;\r\n font-weight: 400;\r\n transition: color 0.2s;\r\n }\r\n .nav-links a:hover { color: var(--c-cyan); }\r\n .nav-cta {\r\n display: flex;\r\n gap: 12px;\r\n align-items: center;\r\n }\r\n .btn-ghost {\r\n color: var(--c-cyan);\r\n border: 1px solid var(--c-border2);\r\n background: transparent;\r\n padding: 9px 20px;\r\n border-radius: 8px;\r\n font-size: 0.9rem;\r\n font-weight: 500;\r\n cursor: pointer;\r\n text-decoration: none;\r\n transition: background 0.2s, border-color 0.2s;\r\n font-family: 'DM Sans', sans-serif;\r\n }\r\n .btn-ghost:hover { background: var(--c-cyan-dim); border-color: var(--c-cyan); }\r\n\r\n .btn-primary {\r\n background: var(--c-cyan);\r\n color: #050a0f;\r\n padding: 9px 22px;\r\n border-radius: 8px;\r\n font-size: 0.9rem;\r\n font-weight: 600;\r\n border: none;\r\n cursor: pointer;\r\n text-decoration: none;\r\n transition: opacity 0.2s, transform 0.15s;\r\n font-family: 'DM Sans', sans-serif;\r\n display: inline-block;\r\n }\r\n .btn-primary:hover { opacity: 0.88; transform: translateY(-1px); }\r\n\r\n \/* \u2500\u2500 HERO \u2500\u2500 *\/\r\n .hero {\r\n min-height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n padding-top: 80px;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n \/* Radial glow behind hero text *\/\r\n .hero::after {\r\n content: '';\r\n position: absolute;\r\n top: 40%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n width: 700px;\r\n height: 700px;\r\n background: radial-gradient(ellipse, rgba(0,210,180,0.07) 0%, transparent 70%);\r\n pointer-events: none;\r\n }\r\n\r\n \/* Grid decoration *\/\r\n .hero-grid {\r\n position: absolute;\r\n inset: 0;\r\n background-image:\r\n linear-gradient(rgba(0,210,180,0.04) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(0,210,180,0.04) 1px, transparent 1px);\r\n background-size: 60px 60px;\r\n mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);\r\n }\r\n\r\n \/* Orbit rings decoration *\/\r\n .orbit {\r\n position: absolute;\r\n border: 1px solid rgba(0,210,180,0.06);\r\n border-radius: 50%;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n pointer-events: none;\r\n }\r\n .orbit-1 { width: 500px; height: 500px; }\r\n .orbit-2 { width: 800px; height: 800px; }\r\n .orbit-3 { width: 1100px; height: 1100px; }\r\n\r\n .hero-content {\r\n position: relative;\r\n z-index: 2;\r\n max-width: 780px;\r\n margin: 0 auto;\r\n text-align: center;\r\n padding: 60px 0;\r\n }\r\n\r\n .hero-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n background: rgba(0,210,180,0.08);\r\n border: 1px solid rgba(0,210,180,0.2);\r\n border-radius: 100px;\r\n padding: 6px 16px;\r\n font-size: 0.82rem;\r\n font-weight: 500;\r\n color: var(--c-cyan);\r\n margin-bottom: 32px;\r\n letter-spacing: 0.03em;\r\n text-transform: uppercase;\r\n }\r\n .hero-badge::before {\r\n content: '';\r\n width: 6px; height: 6px;\r\n background: var(--c-cyan);\r\n border-radius: 50%;\r\n animation: pulse-dot 2s infinite;\r\n }\r\n @keyframes pulse-dot {\r\n 0%,100% { opacity:1; transform: scale(1); }\r\n 50% { opacity:0.4; transform: scale(0.7); }\r\n }\r\n\r\n h1 {\r\n font-family: 'Syne', sans-serif;\r\n font-size: clamp(2.8rem, 5.5vw, 4.8rem);\r\n font-weight: 800;\r\n line-height: 1.08;\r\n letter-spacing: -0.03em;\r\n color: var(--c-white);\r\n margin-bottom: 24px;\r\n }\r\n h1 em {\r\n font-style: normal;\r\n color: var(--c-cyan);\r\n }\r\n h1 .line-stroke {\r\n -webkit-text-stroke: 1px var(--c-cyan);\r\n color: transparent;\r\n }\r\n\r\n .hero-sub {\r\n font-size: 1.15rem;\r\n color: var(--c-muted2);\r\n font-weight: 300;\r\n max-width: 560px;\r\n margin: 0 auto 40px;\r\n line-height: 1.7;\r\n }\r\n\r\n .hero-actions {\r\n display: flex;\r\n gap: 14px;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n margin-bottom: 60px;\r\n }\r\n\r\n .btn-xl {\r\n padding: 15px 34px;\r\n font-size: 1rem;\r\n border-radius: 10px;\r\n }\r\n .btn-xl-ghost {\r\n padding: 15px 34px;\r\n font-size: 1rem;\r\n border-radius: 10px;\r\n }\r\n\r\n .hero-stats {\r\n display: flex;\r\n gap: 40px;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n }\r\n .hero-stat {\r\n text-align: center;\r\n }\r\n .hero-stat-num {\r\n font-family: 'Syne', sans-serif;\r\n font-size: 1.8rem;\r\n font-weight: 700;\r\n color: var(--c-white);\r\n display: block;\r\n }\r\n .hero-stat-label {\r\n font-size: 0.82rem;\r\n color: var(--c-muted);\r\n display: block;\r\n margin-top: 2px;\r\n }\r\n .stat-divider {\r\n width: 1px;\r\n background: var(--c-border);\r\n align-self: stretch;\r\n }\r\n\r\n \/* \u2500\u2500 SCREEN MOCKUP \u2500\u2500 *\/\r\n .hero-screen-wrap {\r\n position: relative;\r\n margin: 60px auto 0;\r\n max-width: 960px;\r\n }\r\n .screen-glow {\r\n position: absolute;\r\n bottom: -60px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 600px;\r\n height: 150px;\r\n background: radial-gradient(ellipse, rgba(0,210,180,0.2) 0%, transparent 70%);\r\n pointer-events: none;\r\n filter: blur(20px);\r\n }\r\n .screen-frame {\r\n background: var(--c-surface);\r\n border: 1px solid var(--c-border2);\r\n border-radius: 16px;\r\n overflow: hidden;\r\n box-shadow: 0 0 80px rgba(0,210,180,0.08), 0 40px 120px rgba(0,0,0,0.6);\r\n }\r\n .screen-topbar {\r\n background: var(--c-surface2);\r\n padding: 12px 16px;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n border-bottom: 1px solid var(--c-border);\r\n }\r\n .dot { width: 10px; height: 10px; border-radius: 50%; }\r\n .dot-r { background: #ff5f57; }\r\n .dot-y { background: #ffbd2e; }\r\n .dot-g { background: #28c840; }\r\n .screen-url {\r\n flex: 1;\r\n background: rgba(0,0,0,0.3);\r\n border: 1px solid var(--c-border);\r\n border-radius: 6px;\r\n padding: 5px 12px;\r\n font-size: 0.75rem;\r\n color: var(--c-muted);\r\n margin: 0 12px;\r\n text-align: center;\r\n font-family: 'DM Sans', monospace;\r\n }\r\n .screen-body {\r\n display: grid;\r\n grid-template-columns: 220px 1fr;\r\n height: 460px;\r\n }\r\n .screen-sidebar {\r\n background: rgba(0,0,0,0.25);\r\n border-right: 1px solid var(--c-border);\r\n padding: 16px 12px;\r\n }\r\n .sidebar-logo-area {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n margin-bottom: 20px;\r\n padding-bottom: 16px;\r\n border-bottom: 1px solid var(--c-border);\r\n }\r\n .sidebar-logo-icon {\r\n width: 28px; height: 28px;\r\n background: var(--c-cyan-dim);\r\n border: 1px solid var(--c-border2);\r\n border-radius: 6px;\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 14px;\r\n }\r\n .sidebar-logo-text {\r\n font-family: 'Syne', sans-serif;\r\n font-size: 0.85rem;\r\n font-weight: 700;\r\n color: var(--c-white);\r\n }\r\n .sidebar-logo-text span { color: var(--c-cyan); }\r\n .sidebar-menu { list-style: none; }\r\n .sidebar-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 8px 10px;\r\n border-radius: 7px;\r\n font-size: 0.78rem;\r\n color: var(--c-muted2);\r\n margin-bottom: 2px;\r\n cursor: default;\r\n transition: background 0.2s;\r\n }\r\n .sidebar-item.active {\r\n background: var(--c-cyan-dim);\r\n color: var(--c-cyan);\r\n border: 1px solid rgba(0,210,180,0.15);\r\n }\r\n .sidebar-item-icon { font-size: 14px; }\r\n .screen-main {\r\n padding: 20px;\r\n overflow: hidden;\r\n position: relative;\r\n }\r\n\r\n \/* Mini dashboard inside screen *\/\r\n .screen-title {\r\n font-family: 'Syne', sans-serif;\r\n font-size: 1rem;\r\n font-weight: 700;\r\n color: var(--c-white);\r\n margin-bottom: 14px;\r\n }\r\n .mini-cards {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 10px;\r\n margin-bottom: 14px;\r\n }\r\n .mini-card {\r\n background: var(--c-surface2);\r\n border: 1px solid var(--c-border);\r\n border-radius: 8px;\r\n padding: 10px 12px;\r\n }\r\n .mini-card-label { font-size: 0.65rem; color: var(--c-muted); margin-bottom: 4px; }\r\n .mini-card-val {\r\n font-family: 'Syne', sans-serif;\r\n font-size: 1.15rem;\r\n font-weight: 700;\r\n color: var(--c-white);\r\n }\r\n .mini-card-val.c { color: var(--c-cyan); }\r\n .mini-chart {\r\n background: var(--c-surface2);\r\n border: 1px solid var(--c-border);\r\n border-radius: 8px;\r\n height: 130px;\r\n margin-bottom: 14px;\r\n padding: 12px;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n .mini-chart-label { font-size: 0.65rem; color: var(--c-muted); margin-bottom: 8px; }\r\n .chart-bars {\r\n display: flex;\r\n align-items: flex-end;\r\n gap: 6px;\r\n height: 80px;\r\n }\r\n .chart-bar {\r\n flex: 1;\r\n border-radius: 3px 3px 0 0;\r\n background: rgba(0,210,180,0.18);\r\n transition: height 0.5s;\r\n }\r\n .chart-bar.hi { background: var(--c-cyan); }\r\n .mini-table {\r\n background: var(--c-surface2);\r\n border: 1px solid var(--c-border);\r\n border-radius: 8px;\r\n overflow: hidden;\r\n }\r\n .mini-table-row {\r\n display: flex;\r\n justify-content: space-between;\r\n padding: 7px 12px;\r\n font-size: 0.7rem;\r\n color: var(--c-muted2);\r\n border-bottom: 1px solid var(--c-border);\r\n }\r\n .mini-table-row:last-child { border-bottom: none; }\r\n .mini-table-row span:last-child { color: var(--c-cyan); font-weight: 500; }\r\n .screen-pill {\r\n display: inline-block;\r\n background: rgba(0,210,180,0.12);\r\n border: 1px solid var(--c-border2);\r\n border-radius: 100px;\r\n padding: 3px 8px;\r\n font-size: 0.6rem;\r\n color: var(--c-cyan);\r\n margin-left: 6px;\r\n }\r\n\r\n \/* \u2500\u2500 SECTION BASE \u2500\u2500 *\/\r\n section { padding: 100px 0; position: relative; z-index: 1; }\r\n\r\n .section-label {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n background: var(--c-cyan-dim);\r\n border: 1px solid var(--c-border2);\r\n border-radius: 100px;\r\n padding: 5px 14px;\r\n font-size: 0.75rem;\r\n font-weight: 600;\r\n color: var(--c-cyan);\r\n letter-spacing: 0.06em;\r\n text-transform: uppercase;\r\n margin-bottom: 20px;\r\n }\r\n\r\n h2 {\r\n font-family: 'Syne', sans-serif;\r\n font-size: clamp(2rem, 3.5vw, 3rem);\r\n font-weight: 800;\r\n letter-spacing: -0.025em;\r\n line-height: 1.12;\r\n color: var(--c-white);\r\n margin-bottom: 16px;\r\n }\r\n h2 em { font-style: normal; color: var(--c-cyan); }\r\n\r\n .section-sub {\r\n font-size: 1.05rem;\r\n color: var(--c-muted2);\r\n font-weight: 300;\r\n max-width: 540px;\r\n line-height: 1.7;\r\n margin-bottom: 60px;\r\n }\r\n\r\n \/* \u2500\u2500 MODULES GRID \u2500\u2500 *\/\r\n .modules-section { background: var(--c-surface); border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); }\r\n\r\n .modules-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n gap: 1px;\r\n background: var(--c-border);\r\n border: 1px solid var(--c-border);\r\n border-radius: var(--r2);\r\n overflow: hidden;\r\n }\r\n\r\n .module-card {\r\n background: var(--c-surface);\r\n padding: 36px 32px;\r\n position: relative;\r\n transition: background 0.3s;\r\n cursor: default;\r\n }\r\n .module-card:hover { background: var(--c-surface2); }\r\n .module-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0; left: 0; right: 0;\r\n height: 2px;\r\n background: var(--c-cyan);\r\n opacity: 0;\r\n transition: opacity 0.3s;\r\n }\r\n .module-card:hover::before { opacity: 1; }\r\n\r\n .module-icon {\r\n width: 48px; height: 48px;\r\n background: var(--c-cyan-dim);\r\n border: 1px solid var(--c-border2);\r\n border-radius: 12px;\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 22px;\r\n margin-bottom: 20px;\r\n }\r\n .module-title {\r\n font-family: 'Syne', sans-serif;\r\n font-size: 1.05rem;\r\n font-weight: 700;\r\n color: var(--c-white);\r\n margin-bottom: 10px;\r\n }\r\n .module-desc {\r\n font-size: 0.88rem;\r\n color: var(--c-muted2);\r\n line-height: 1.65;\r\n font-weight: 300;\r\n }\r\n .module-tag {\r\n display: inline-block;\r\n margin-top: 14px;\r\n background: rgba(0,210,180,0.06);\r\n border: 1px solid var(--c-border);\r\n border-radius: 6px;\r\n padding: 4px 10px;\r\n font-size: 0.72rem;\r\n color: var(--c-cyan);\r\n font-weight: 500;\r\n }\r\n\r\n \/* \u2500\u2500 ODONTOGRAM FEATURE \u2500\u2500 *\/\r\n .feature-split {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 80px;\r\n align-items: center;\r\n }\r\n .feature-split.reverse { direction: rtl; }\r\n .feature-split.reverse > * { direction: ltr; }\r\n\r\n .feature-visual {\r\n background: var(--c-surface);\r\n border: 1px solid var(--c-border2);\r\n border-radius: var(--r2);\r\n padding: 32px;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n .feature-visual::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -40px; right: -40px;\r\n width: 200px; height: 200px;\r\n background: radial-gradient(ellipse, rgba(0,210,180,0.1) 0%, transparent 70%);\r\n pointer-events: none;\r\n }\r\n\r\n \/* Odontogram SVG mini *\/\r\n .odonto-demo {\r\n font-size: 0; \/* remove whitespace *\/\r\n }\r\n .tooth-row {\r\n display: flex;\r\n gap: 3px;\r\n justify-content: center;\r\n margin-bottom: 12px;\r\n flex-wrap: nowrap;\r\n width: 100%;\r\n }\r\n .tooth {\r\n flex: 1 1 0;\r\n min-width: 0;\r\n max-width: 30px;\r\n height: 34px;\r\n border: 1.5px solid rgba(0,210,180,0.3);\r\n border-radius: 4px;\r\n background: rgba(0,210,180,0.04);\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 7px;\r\n color: var(--c-muted);\r\n transition: border-color 0.2s, background 0.2s;\r\n cursor: default;\r\n overflow: hidden;\r\n }\r\n .tooth.blue { background: rgba(21,101,192,0.25); border-color: #1565c0; }\r\n .tooth.red { background: rgba(220,53,69,0.25); border-color: #dc3545; }\r\n .tooth.green { background: rgba(46,125,50,0.2); border-color: #2e7d32; }\r\n .tooth-num { font-size: 7px; color: var(--c-muted); text-align: center; }\r\n .color-legend {\r\n display: flex;\r\n gap: 16px;\r\n margin-top: 20px;\r\n flex-wrap: wrap;\r\n }\r\n .legend-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 6px;\r\n font-size: 0.75rem;\r\n color: var(--c-muted2);\r\n }\r\n .legend-dot {\r\n width: 10px; height: 10px;\r\n border-radius: 3px;\r\n }\r\n\r\n \/* \u2500\u2500 AI FEATURE \u2500\u2500 *\/\r\n .ai-card {\r\n background: linear-gradient(135deg, var(--c-surface) 0%, rgba(0,210,180,0.05) 100%);\r\n border: 1px solid var(--c-border2);\r\n border-radius: var(--r2);\r\n padding: 40px;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n .ai-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 6px;\r\n background: rgba(255,107,107,0.1);\r\n border: 1px solid rgba(255,107,107,0.25);\r\n border-radius: 100px;\r\n padding: 4px 12px;\r\n font-size: 0.75rem;\r\n font-weight: 600;\r\n color: #ff9999;\r\n margin-bottom: 16px;\r\n letter-spacing: 0.04em;\r\n text-transform: uppercase;\r\n }\r\n .ai-scan-demo {\r\n background: rgba(0,0,0,0.3);\r\n border: 1px solid var(--c-border);\r\n border-radius: 12px;\r\n padding: 20px;\r\n margin-top: 24px;\r\n }\r\n .scan-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 16px;\r\n }\r\n .scan-title { font-size: 0.82rem; color: var(--c-muted2); }\r\n .scan-status {\r\n display: flex;\r\n align-items: center;\r\n gap: 6px;\r\n font-size: 0.75rem;\r\n color: var(--c-cyan);\r\n }\r\n .scan-pulse {\r\n width: 6px; height: 6px;\r\n background: var(--c-cyan);\r\n border-radius: 50%;\r\n animation: pulse-dot 1.5s infinite;\r\n }\r\n .scan-finding {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 10px 14px;\r\n border-radius: 8px;\r\n background: var(--c-surface2);\r\n margin-bottom: 8px;\r\n font-size: 0.82rem;\r\n }\r\n .scan-finding-info { display: flex; align-items: center; gap: 10px; }\r\n .scan-finding-tooth {\r\n background: var(--c-cyan-dim);\r\n color: var(--c-cyan);\r\n border-radius: 5px;\r\n padding: 2px 8px;\r\n font-size: 0.72rem;\r\n font-weight: 600;\r\n font-family: 'Syne', sans-serif;\r\n }\r\n .scan-finding-text { color: var(--c-muted2); }\r\n .badge-high { background: rgba(255,107,107,0.12); color: #ff9999; padding: 2px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: 600; }\r\n .badge-med { background: rgba(255,209,102,0.12); color: #ffd166; padding: 2px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: 600; }\r\n .badge-low { background: rgba(0,210,180,0.1); color: var(--c-cyan); padding: 2px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: 600; }\r\n\r\n \/* \u2500\u2500 PORTAL GRID \u2500\u2500 *\/\r\n .portal-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 60px;\r\n align-items: center;\r\n }\r\n\r\n \/* \u2500\u2500 PORTAL FEATURE \u2500\u2500 *\/\r\n .portal-phones {\r\n display: flex;\r\n gap: 16px;\r\n justify-content: center;\r\n align-items: flex-end;\r\n }\r\n .phone-frame {\r\n width: 180px;\r\n background: var(--c-surface);\r\n border: 1.5px solid var(--c-border2);\r\n border-radius: 24px;\r\n overflow: hidden;\r\n box-shadow: 0 20px 60px rgba(0,0,0,0.5);\r\n }\r\n .phone-frame.tall { width: 200px; transform: translateY(-20px); }\r\n .phone-notch {\r\n height: 24px;\r\n background: var(--c-surface2);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n .notch-bar {\r\n width: 60px; height: 6px;\r\n background: rgba(0,0,0,0.5);\r\n border-radius: 3px;\r\n }\r\n .phone-body { padding: 14px; }\r\n .phone-header {\r\n font-family: 'Syne', sans-serif;\r\n font-size: 0.72rem;\r\n font-weight: 700;\r\n color: var(--c-white);\r\n margin-bottom: 10px;\r\n }\r\n .phone-card {\r\n background: var(--c-surface2);\r\n border: 1px solid var(--c-border);\r\n border-radius: 8px;\r\n padding: 10px;\r\n margin-bottom: 6px;\r\n }\r\n .phone-card-title { font-size: 0.62rem; color: var(--c-muted); margin-bottom: 3px; }\r\n .phone-card-val { font-size: 0.82rem; font-weight: 600; color: var(--c-white); font-family: 'Syne', sans-serif; }\r\n .phone-card-val.cyan { color: var(--c-cyan); }\r\n .phone-tab-bar {\r\n display: flex;\r\n border-top: 1px solid var(--c-border);\r\n padding: 8px 0 4px;\r\n gap: 4px;\r\n }\r\n .phone-tab {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 2px;\r\n font-size: 0.52rem;\r\n color: var(--c-muted);\r\n padding: 2px;\r\n }\r\n .phone-tab.active { color: var(--c-cyan); }\r\n .phone-tab-icon { font-size: 14px; }\r\n\r\n \/* \u2500\u2500 CHAT WIDGET DEMO \u2500\u2500 *\/\r\n .chat-demo {\r\n background: var(--c-surface);\r\n border: 1px solid var(--c-border2);\r\n border-radius: 16px;\r\n overflow: hidden;\r\n max-width: 100%;\r\n width: 100%;\r\n }\r\n .chat-header {\r\n background: var(--c-surface2);\r\n padding: 14px 18px;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n border-bottom: 1px solid var(--c-border);\r\n }\r\n .chat-avatar {\r\n width: 34px; height: 34px;\r\n background: var(--c-cyan-dim);\r\n border: 1px solid var(--c-border2);\r\n border-radius: 50%;\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 16px;\r\n }\r\n .chat-name { font-size: 0.85rem; font-weight: 600; color: var(--c-white); }\r\n .chat-online { font-size: 0.7rem; color: var(--c-cyan); display: flex; align-items: center; gap: 4px; }\r\n .chat-online::before { content: ''; width: 5px; height: 5px; background: var(--c-cyan); border-radius: 50%; }\r\n .chat-messages { padding: 16px; display: flex; flex-direction: column; gap: 10px; }\r\n .msg {\r\n max-width: 80%;\r\n font-size: 0.8rem;\r\n line-height: 1.5;\r\n padding: 10px 13px;\r\n border-radius: 12px;\r\n }\r\n .msg-bot {\r\n background: var(--c-surface2);\r\n color: var(--c-muted2);\r\n border-radius: 4px 12px 12px 12px;\r\n border: 1px solid var(--c-border);\r\n align-self: flex-start;\r\n }\r\n .msg-user {\r\n background: var(--c-cyan);\r\n color: #050a0f;\r\n border-radius: 12px 4px 12px 12px;\r\n font-weight: 500;\r\n align-self: flex-end;\r\n }\r\n .chat-chips {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 6px;\r\n margin-top: 4px;\r\n }\r\n .chip {\r\n background: rgba(0,210,180,0.08);\r\n border: 1px solid var(--c-border2);\r\n border-radius: 100px;\r\n padding: 5px 12px;\r\n font-size: 0.72rem;\r\n color: var(--c-cyan);\r\n cursor: default;\r\n transition: background 0.2s;\r\n }\r\n .chip:hover { background: var(--c-cyan-dim); }\r\n\r\n \/* \u2500\u2500 PRICING-STYLE CTA \u2500\u2500 *\/\r\n .cta-section {\r\n text-align: center;\r\n padding: 120px 0;\r\n }\r\n .cta-box {\r\n background: var(--c-surface);\r\n border: 1px solid var(--c-border2);\r\n border-radius: 24px;\r\n padding: 80px 60px;\r\n position: relative;\r\n overflow: hidden;\r\n max-width: 800px;\r\n margin: 0 auto;\r\n }\r\n .cta-box::before {\r\n content: '';\r\n position: absolute;\r\n top: -100px; left: 50%;\r\n transform: translateX(-50%);\r\n width: 400px; height: 300px;\r\n background: radial-gradient(ellipse, rgba(0,210,180,0.12) 0%, transparent 70%);\r\n pointer-events: none;\r\n }\r\n .cta-box h2 { margin-bottom: 16px; }\r\n .cta-box .section-sub { margin: 0 auto 40px; }\r\n .cta-actions {\r\n display: flex;\r\n gap: 14px;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n }\r\n .btn-lg {\r\n padding: 16px 40px;\r\n font-size: 1.05rem;\r\n border-radius: 10px;\r\n }\r\n\r\n \/* \u2500\u2500 FEATURES TICKER \u2500\u2500 *\/\r\n .ticker-wrap {\r\n overflow: hidden;\r\n border-top: 1px solid var(--c-border);\r\n border-bottom: 1px solid var(--c-border);\r\n padding: 18px 0;\r\n background: var(--c-surface);\r\n position: relative;\r\n }\r\n .ticker-wrap::before, .ticker-wrap::after {\r\n content: '';\r\n position: absolute;\r\n top: 0; bottom: 0;\r\n width: 120px;\r\n z-index: 2;\r\n pointer-events: none;\r\n }\r\n .ticker-wrap::before { left: 0; background: linear-gradient(to right, var(--c-surface), transparent); }\r\n .ticker-wrap::after { right: 0; background: linear-gradient(to left, var(--c-surface), transparent); }\r\n .ticker {\r\n display: flex;\r\n gap: 0;\r\n animation: ticker-move 30s linear infinite;\r\n white-space: nowrap;\r\n }\r\n .ticker-item {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 0 28px;\r\n font-size: 0.85rem;\r\n color: var(--c-muted2);\r\n font-weight: 400;\r\n }\r\n .ticker-dot { color: var(--c-cyan); font-size: 1.2em; }\r\n @keyframes ticker-move {\r\n 0% { transform: translateX(0); }\r\n 100% { transform: translateX(-50%); }\r\n }\r\n\r\n \/* \u2500\u2500 TESTIMONIAL \/ TRUST \u2500\u2500 *\/\r\n .trust-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 20px;\r\n }\r\n .trust-card {\r\n background: var(--c-surface);\r\n border: 1px solid var(--c-border);\r\n border-radius: var(--r2);\r\n padding: 32px;\r\n transition: border-color 0.3s;\r\n }\r\n .trust-card:hover { border-color: var(--c-border2); }\r\n .trust-stars { color: var(--c-accent2); font-size: 0.9rem; margin-bottom: 14px; }\r\n .trust-text { font-size: 0.9rem; color: var(--c-muted2); line-height: 1.7; margin-bottom: 20px; font-weight: 300; font-style: italic; }\r\n .trust-author { display: flex; align-items: center; gap: 10px; }\r\n .trust-avatar {\r\n width: 36px; height: 36px;\r\n border-radius: 50%;\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 14px;\r\n font-weight: 600;\r\n font-family: 'Syne', sans-serif;\r\n font-size: 0.8rem;\r\n }\r\n .ta1 { background: rgba(0,210,180,0.15); color: var(--c-cyan); }\r\n .ta2 { background: rgba(255,107,107,0.15); color: #ff9999; }\r\n .ta3 { background: rgba(77,166,255,0.15); color: var(--c-blue); }\r\n .trust-name { font-size: 0.85rem; font-weight: 600; color: var(--c-white); }\r\n .trust-role { font-size: 0.75rem; color: var(--c-muted); }\r\n\r\n \/* \u2500\u2500 FOOTER \u2500\u2500 *\/\r\n footer {\r\n background: var(--c-surface);\r\n border-top: 1px solid var(--c-border);\r\n padding: 60px 0 40px;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n .footer-inner {\r\n display: grid;\r\n grid-template-columns: 1.5fr 1fr 1fr 1fr;\r\n gap: 40px;\r\n margin-bottom: 48px;\r\n }\r\n .footer-brand p {\r\n font-size: 0.88rem;\r\n color: var(--c-muted);\r\n line-height: 1.7;\r\n margin-top: 14px;\r\n font-weight: 300;\r\n max-width: 260px;\r\n }\r\n .footer-col-title {\r\n font-family: 'Syne', sans-serif;\r\n font-size: 0.85rem;\r\n font-weight: 700;\r\n color: var(--c-white);\r\n margin-bottom: 16px;\r\n letter-spacing: 0.02em;\r\n }\r\n .footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }\r\n .footer-links a {\r\n color: var(--c-muted);\r\n text-decoration: none;\r\n font-size: 0.85rem;\r\n font-weight: 300;\r\n transition: color 0.2s;\r\n }\r\n .footer-links a:hover { color: var(--c-cyan); }\r\n .footer-bottom {\r\n border-top: 1px solid var(--c-border);\r\n padding-top: 24px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n font-size: 0.8rem;\r\n color: var(--c-muted);\r\n }\r\n .footer-bottom a { color: var(--c-cyan); text-decoration: none; }\r\n\r\n \/* \u2500\u2500 DEMO MODAL \u2500\u2500 *\/\r\n .modal-overlay {\r\n display: none;\r\n position: fixed;\r\n inset: 0;\r\n background: rgba(5,10,15,0.9);\r\n backdrop-filter: blur(10px);\r\n z-index: 1000;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n .modal-overlay.open { display: flex; }\r\n .modal-box {\r\n background: var(--c-surface);\r\n border: 1px solid var(--c-border2);\r\n border-radius: 20px;\r\n padding: 48px;\r\n max-width: 520px;\r\n width: 90%;\r\n position: relative;\r\n animation: modal-in 0.3s ease;\r\n }\r\n @keyframes modal-in {\r\n from { transform: translateY(20px); opacity: 0; }\r\n to { transform: translateY(0); opacity: 1; }\r\n }\r\n .modal-close {\r\n position: absolute;\r\n top: 18px; right: 18px;\r\n background: var(--c-surface2);\r\n border: 1px solid var(--c-border);\r\n border-radius: 8px;\r\n width: 32px; height: 32px;\r\n display: flex; align-items: center; justify-content: center;\r\n color: var(--c-muted);\r\n cursor: pointer;\r\n font-size: 16px;\r\n transition: color 0.2s;\r\n }\r\n .modal-close:hover { color: var(--c-white); }\r\n .modal-box h3 {\r\n font-family: 'Syne', sans-serif;\r\n font-size: 1.5rem;\r\n font-weight: 800;\r\n color: var(--c-white);\r\n margin-bottom: 8px;\r\n letter-spacing: -0.02em;\r\n }\r\n .modal-sub { font-size: 0.9rem; color: var(--c-muted2); margin-bottom: 32px; }\r\n .cred-table {\r\n background: rgba(0,0,0,0.3);\r\n border: 1px solid var(--c-border);\r\n border-radius: 12px;\r\n overflow: hidden;\r\n margin-bottom: 24px;\r\n }\r\n .cred-row {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 14px 20px;\r\n border-bottom: 1px solid var(--c-border);\r\n }\r\n .cred-row:last-child { border-bottom: none; }\r\n .cred-label { font-size: 0.82rem; color: var(--c-muted); }\r\n .cred-val {\r\n font-family: 'DM Sans', monospace;\r\n font-size: 0.85rem;\r\n color: var(--c-cyan);\r\n background: var(--c-cyan-dim);\r\n padding: 3px 10px;\r\n border-radius: 5px;\r\n border: 1px solid var(--c-border);\r\n }\r\n .modal-access-btn {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 12px;\r\n }\r\n .access-btn {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n background: var(--c-surface2);\r\n border: 1px solid var(--c-border);\r\n border-radius: 10px;\r\n padding: 14px 20px;\r\n text-decoration: none;\r\n transition: border-color 0.2s, background 0.2s;\r\n cursor: pointer;\r\n }\r\n .access-btn:hover { border-color: var(--c-border2); background: rgba(0,210,180,0.04); }\r\n .access-btn-info { text-align: left; }\r\n .access-btn-role { font-size: 0.88rem; font-weight: 600; color: var(--c-white); }\r\n .access-btn-cred { font-size: 0.75rem; color: var(--c-muted); margin-top: 2px; }\r\n .access-btn-arrow { color: var(--c-cyan); font-size: 1.1rem; }\r\n .modal-note { font-size: 0.78rem; color: var(--c-muted); text-align: center; margin-top: 16px; }\r\n\r\n \/* \u2500\u2500 ANIMATIONS \u2500\u2500 *\/\r\n .fade-up {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n transition: opacity 0.7s ease, transform 0.7s ease;\r\n }\r\n .fade-up.visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n .fade-up-delay-1 { transition-delay: 0.1s; }\r\n .fade-up-delay-2 { transition-delay: 0.2s; }\r\n .fade-up-delay-3 { transition-delay: 0.3s; }\r\n\r\n \/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\r\n\r\n \/* Tablet & smaller desktop *\/\r\n @media (max-width: 1024px) {\r\n .feature-split { gap: 48px; }\r\n .hero-screen-wrap { max-width: 100%; }\r\n }\r\n\r\n \/* Tablet *\/\r\n @media (max-width: 900px) {\r\n \/* Navigation *\/\r\n .nav-links { display: none; }\r\n\r\n \/* Feature splits: stack vertically *\/\r\n .feature-split { grid-template-columns: 1fr; gap: 40px; }\r\n .feature-split.reverse { direction: ltr; }\r\n .feature-split.reverse > * { direction: ltr; }\r\n\r\n \/* Feature visual: make odontogram fit *\/\r\n .feature-visual { padding: 20px; }\r\n\r\n \/* Dashboard screen *\/\r\n .screen-body { grid-template-columns: 1fr; }\r\n .screen-sidebar { display: none; }\r\n .mini-cards { grid-template-columns: repeat(2, 1fr); }\r\n\r\n \/* Modules *\/\r\n .modules-grid { grid-template-columns: repeat(2, 1fr); }\r\n\r\n \/* Trust *\/\r\n .trust-grid { grid-template-columns: 1fr 1fr; gap: 16px; }\r\n\r\n \/* Footer *\/\r\n .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }\r\n\r\n \/* Portal *\/\r\n .portal-grid { grid-template-columns: 1fr; gap: 40px; }\r\n .portal-phones { flex-direction: row; align-items: flex-end; justify-content: center; flex-wrap: wrap; gap: 12px; }\r\n .phone-frame.tall { transform: none; }\r\n .chat-demo { max-width: 480px; margin: 0 auto; width: 100%; }\r\n\r\n \/* CTA *\/\r\n .cta-box { padding: 60px 40px; }\r\n }\r\n\r\n \/* Mobile *\/\r\n @media (max-width: 600px) {\r\n \/* Typography *\/\r\n h1 { font-size: 2.1rem; }\r\n h2 { font-size: 1.75rem; }\r\n\r\n \/* Section spacing *\/\r\n section { padding: 70px 0; }\r\n\r\n \/* Hero *\/\r\n .hero-stats { gap: 16px; flex-wrap: wrap; justify-content: center; }\r\n .stat-divider { display: none; }\r\n .hero-actions { flex-direction: column; align-items: center; }\r\n .btn-xl, .btn-xl-ghost { width: 100%; max-width: 320px; text-align: center; }\r\n\r\n \/* Screen mockup *\/\r\n .screen-body { height: 280px; }\r\n .mini-cards { grid-template-columns: repeat(2, 1fr); }\r\n .mini-chart { height: 90px; }\r\n .mini-table-row { font-size: 0.6rem; padding: 5px 8px; }\r\n\r\n \/* Odontogram teeth: smaller on mobile *\/\r\n .feature-visual { padding: 16px; }\r\n .tooth { height: 26px; font-size: 6px; }\r\n\r\n \/* Modules: single column *\/\r\n .modules-grid { grid-template-columns: 1fr; }\r\n\r\n \/* Trust: single column *\/\r\n .trust-grid { grid-template-columns: 1fr; }\r\n\r\n \/* Portal phones: stack *\/\r\n .portal-phones { flex-direction: column; align-items: center; }\r\n .phone-frame { width: 200px; }\r\n .phone-frame.tall { width: 200px; transform: none; }\r\n .chat-demo { max-width: 100%; width: 100%; }\r\n\r\n \/* CTA *\/\r\n .cta-box { padding: 40px 20px; }\r\n .cta-actions { flex-direction: column; align-items: center; }\r\n .btn-lg { width: 100%; max-width: 320px; text-align: center; }\r\n\r\n \/* Footer *\/\r\n .footer-inner { grid-template-columns: 1fr; gap: 28px; }\r\n .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }\r\n\r\n \/* Modal *\/\r\n .modal-box { padding: 28px 18px; }\r\n }\r\n\r\n \/* Very small mobile *\/\r\n @media (max-width: 400px) {\r\n h1 { font-size: 1.85rem; }\r\n .hero-badge { font-size: 0.7rem; padding: 5px 12px; }\r\n .tooth { height: 22px; }\r\n .phone-frame { width: 160px; }\r\n .phone-frame.tall { width: 160px; }\r\n .nav-cta .btn-ghost { display: none; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- NAV -->\r\n<nav id=\"mainNav\">\r\n <div class=\"nav-inner\">\r\n <a class=\"nav-logo\" href=\"#\">\r\n <div class=\"logo-icon\">\ud83e\uddb7<\/div>\r\n Odonto<span>Sist<\/span>\r\n <\/a>\r\n <ul class=\"nav-links\">\r\n <li><a href=\"#modulos\">M\u00f3dulos<\/a><\/li>\r\n <li><a href=\"#odontograma\">Odontograma<\/a><\/li>\r\n <li><a href=\"#ia\">Cl\u00ednica<\/a><\/li>\r\n <li><a href=\"#portal\">Portal<\/a><\/li>\r\n <li><a href=\"#demo\">Demo<\/a><\/li>\r\n <\/ul>\r\n <div class=\"nav-cta\">\r\n <a href=\"#demo\" class=\"btn-ghost\" onclick=\"openModal()\">Ver Demo<\/a>\r\n <a href=\"https:\/\/vectora.ar\/en\/sistodonto\/\" target=\"_blank\" class=\"btn-primary\">Ingresar \u2192<\/a>\r\n <\/div>\r\n <\/div>\r\n<\/nav>\r\n\r\n<!-- HERO -->\r\n<section class=\"hero\">\r\n <div class=\"hero-grid\"><\/div>\r\n <div class=\"orbit orbit-1\"><\/div>\r\n <div class=\"orbit orbit-2\"><\/div>\r\n <div class=\"orbit orbit-3\"><\/div>\r\n\r\n <div class=\"container\">\r\n <div class=\"hero-content\">\r\n <div class=\"hero-badge\">Sistema de gesti\u00f3n odontol\u00f3gica<\/div>\r\n <h1>El futuro de tu<br><em>consultorio dental<\/em><br>ya lleg\u00f3<\/h1>\r\n <p class=\"hero-sub\">Gesti\u00f3n completa de pacientes, turnos inteligentes, odontograma digital, inteligencia artificial y portal del paciente \u2014 todo integrado, todo en uno.<\/p>\r\n <div class=\"hero-actions\">\r\n <a href=\"#\" class=\"btn-primary btn-xl\" onclick=\"openModal(); return false;\">Acceder a la Demo \u2192<\/a>\r\n <a href=\"#modulos\" class=\"btn-ghost btn-xl-ghost\">Ver caracter\u00edsticas<\/a>\r\n <\/div>\r\n <div class=\"hero-stats\">\r\n <div class=\"hero-stat\">\r\n <span class=\"hero-stat-num\">121<\/span>\r\n <span class=\"hero-stat-label\">Procedimientos codificados<\/span>\r\n <\/div>\r\n <div class=\"stat-divider\"><\/div>\r\n <div class=\"hero-stat\">\r\n <span class=\"hero-stat-num\">12+<\/span>\r\n <span class=\"hero-stat-label\">M\u00f3dulos integrados<\/span>\r\n <\/div>\r\n <div class=\"stat-divider\"><\/div>\r\n <div class=\"hero-stat\">\r\n <span class=\"hero-stat-num\">IA<\/span>\r\n <span class=\"hero-stat-label\">An\u00e1lisis de radiograf\u00edas<\/span>\r\n <\/div>\r\n <div class=\"stat-divider\"><\/div>\r\n <div class=\"hero-stat\">\r\n <span class=\"hero-stat-num\">$0<\/span>\r\n <span class=\"hero-stat-label\">Costo del asistente virtual<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- SCREEN MOCKUP -->\r\n <div class=\"hero-screen-wrap fade-up\">\r\n <div class=\"screen-glow\"><\/div>\r\n <div class=\"screen-frame\">\r\n <div class=\"screen-topbar\">\r\n <div class=\"dot dot-r\"><\/div>\r\n <div class=\"dot dot-y\"><\/div>\r\n <div class=\"dot dot-g\"><\/div>\r\n <div class=\"screen-url\">vectora.ar\/sistodonto\/dashboard<\/div>\r\n <\/div>\r\n <div class=\"screen-body\">\r\n <div class=\"screen-sidebar\">\r\n <div class=\"sidebar-logo-area\">\r\n <div class=\"sidebar-logo-icon\">\ud83e\uddb7<\/div>\r\n <div class=\"sidebar-logo-text\">Odonto<span>Sist<\/span><\/div>\r\n <\/div>\r\n <ul class=\"sidebar-menu\">\r\n <li class=\"sidebar-item active\"><span class=\"sidebar-item-icon\">\ud83d\udcca<\/span> Dashboard<\/li>\r\n <li class=\"sidebar-item\"><span class=\"sidebar-item-icon\">\ud83d\udc65<\/span> Pacientes<\/li>\r\n <li class=\"sidebar-item\"><span class=\"sidebar-item-icon\">\ud83d\udcc5<\/span> Turnos<\/li>\r\n <li class=\"sidebar-item\"><span class=\"sidebar-item-icon\">\ud83e\uddb7<\/span> Odontograma<\/li>\r\n <li class=\"sidebar-item\"><span class=\"sidebar-item-icon\">\ud83d\udccb<\/span> Historial<\/li>\r\n <li class=\"sidebar-item\"><span class=\"sidebar-item-icon\">\ud83e\uddea<\/span> Laboratorio<\/li>\r\n <li class=\"sidebar-item\"><span class=\"sidebar-item-icon\">\ud83d\udc8a<\/span> Facturaci\u00f3n<\/li>\r\n <li class=\"sidebar-item\"><span class=\"sidebar-item-icon\">\ud83d\udeaa<\/span> Sala de Espera<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"screen-main\">\r\n <div class=\"screen-title\">Hoy \u2014 Martes 28 de Abril <span class=\"screen-pill\">En vivo<\/span><\/div>\r\n <div class=\"mini-cards\">\r\n <div class=\"mini-card\">\r\n <div class=\"mini-card-label\">Turnos hoy<\/div>\r\n <div class=\"mini-card-val c\">18<\/div>\r\n <\/div>\r\n <div class=\"mini-card\">\r\n <div class=\"mini-card-label\">Pacientes nuevos<\/div>\r\n <div class=\"mini-card-val\">4<\/div>\r\n <\/div>\r\n <div class=\"mini-card\">\r\n <div class=\"mini-card-label\">En espera<\/div>\r\n <div class=\"mini-card-val\">3<\/div>\r\n <\/div>\r\n <div class=\"mini-card\">\r\n <div class=\"mini-card-label\">Facturado<\/div>\r\n <div class=\"mini-card-val\">$142k<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"mini-chart\">\r\n <div class=\"mini-chart-label\">Turnos esta semana<\/div>\r\n <div class=\"chart-bars\">\r\n <div class=\"chart-bar\" style=\"height:55%\"><\/div>\r\n <div class=\"chart-bar\" style=\"height:72%\"><\/div>\r\n <div class=\"chart-bar\" style=\"height:45%\"><\/div>\r\n <div class=\"chart-bar\" style=\"height:88%\"><\/div>\r\n <div class=\"chart-bar hi\" style=\"height:100%\"><\/div>\r\n <div class=\"chart-bar\" style=\"height:60%\"><\/div>\r\n <div class=\"chart-bar\" style=\"height:35%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"mini-table\">\r\n <div class=\"mini-table-row\"><span>Garc\u00eda, M. \u2014 09:00 \u00b7 Endodoncia<\/span><span>Consultorio 1<\/span><\/div>\r\n <div class=\"mini-table-row\"><span>L\u00f3pez, A. \u2014 10:30 \u00b7 Blanqueamiento<\/span><span>Consultorio 2<\/span><\/div>\r\n <div class=\"mini-table-row\"><span>Fern\u00e1ndez, R. \u2014 11:00 \u00b7 Control<\/span><span>Consultorio 1<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- TICKER -->\r\n<div class=\"ticker-wrap\">\r\n <div class=\"ticker\">\r\n <span class=\"ticker-item\"><span class=\"ticker-dot\">\u25c6<\/span> Agenda inteligente con FullCalendar<\/span>\r\n <span class=\"ticker-item\"><span class=\"ticker-dot\">\u25c6<\/span> Odontograma digital interactivo SVG<\/span>\r\n <span class=\"ticker-item\"><span class=\"ticker-dot\">\u25c6<\/span> An\u00e1lisis de Rx con IA<\/span>\r\n <span class=\"ticker-item\"><span class=\"ticker-dot\">\u25c6<\/span> Portal del paciente con 5 secciones<\/span>\r\n <span class=\"ticker-item\"><span class=\"ticker-dot\">\u25c6<\/span> Nomenclador oficial Mendoza \u2014 121 procedimientos<\/span>\r\n <span class=\"ticker-item\"><span class=\"ticker-dot\">\u25c6<\/span> Asistente virtual de chat 24\/7<\/span>\r\n <span class=\"ticker-item\"><span class=\"ticker-dot\">\u25c6<\/span> Sala de espera en pantalla TV<\/span>\r\n <span class=\"ticker-item\"><span class=\"ticker-dot\">\u25c6<\/span> Facturaci\u00f3n y presupuestos integrados<\/span>\r\n <span class=\"ticker-item\"><span class=\"ticker-dot\">\u25c6<\/span> Gesti\u00f3n de laboratorio dental<\/span>\r\n <span class=\"ticker-item\"><span class=\"ticker-dot\">\u25c6<\/span> Control granular de permisos por rol<\/span>\r\n <!-- duplicate for seamless loop -->\r\n <span class=\"ticker-item\"><span class=\"ticker-dot\">\u25c6<\/span> Agenda inteligente con FullCalendar<\/span>\r\n <span class=\"ticker-item\"><span class=\"ticker-dot\">\u25c6<\/span> Odontograma digital interactivo SVG<\/span>\r\n <span class=\"ticker-item\"><span class=\"ticker-dot\">\u25c6<\/span> An\u00e1lisis de Rx con IA<\/span>\r\n <span class=\"ticker-item\"><span class=\"ticker-dot\">\u25c6<\/span> Portal del paciente con 5 secciones<\/span>\r\n <span class=\"ticker-item\"><span class=\"ticker-dot\">\u25c6<\/span> Nomenclador oficial Mendoza \u2014 121 procedimientos<\/span>\r\n <span class=\"ticker-item\"><span class=\"ticker-dot\">\u25c6<\/span> Asistente virtual de chat 24\/7<\/span>\r\n <span class=\"ticker-item\"><span class=\"ticker-dot\">\u25c6<\/span> Sala de espera en pantalla TV<\/span>\r\n <span class=\"ticker-item\"><span class=\"ticker-dot\">\u25c6<\/span> Facturaci\u00f3n y presupuestos integrados<\/span>\r\n <span class=\"ticker-item\"><span class=\"ticker-dot\">\u25c6<\/span> Gesti\u00f3n de laboratorio dental<\/span>\r\n <span class=\"ticker-item\"><span class=\"ticker-dot\">\u25c6<\/span> Control granular de permisos por rol<\/span>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- MODULES -->\r\n<section class=\"modules-section\" id=\"modulos\">\r\n <div class=\"container\">\r\n <div class=\"section-label\">M\u00f3dulos del sistema<\/div>\r\n <h2>Todo lo que necesita<br>tu <em>consultorio<\/em><\/h2>\r\n <p class=\"section-sub\">Cada m\u00f3dulo fue dise\u00f1ado con el flujo real de trabajo odontol\u00f3gico. Sin fricciones, sin curvas de aprendizaje empinadas.<\/p>\r\n\r\n <div class=\"modules-grid fade-up\">\r\n <div class=\"module-card\">\r\n <div class=\"module-icon\">\ud83d\udcc5<\/div>\r\n <div class=\"module-title\">Agenda Inteligente<\/div>\r\n <p class=\"module-desc\">Calendario visual con FullCalendar. Gesti\u00f3n de disponibilidad por profesional, turnos online desde el portal y bloqueos de horario configurables.<\/p>\r\n <span class=\"module-tag\">FullCalendar 6<\/span>\r\n <\/div>\r\n <div class=\"module-card\">\r\n <div class=\"module-icon\">\ud83d\udc65<\/div>\r\n <div class=\"module-title\">Gesti\u00f3n de Pacientes<\/div>\r\n <p class=\"module-desc\">Ficha completa del paciente con historial cl\u00ednico, archivos adjuntos (Rx, estudios), odontograma vinculado y seguimiento de tratamientos.<\/p>\r\n <span class=\"module-tag\">Historia cl\u00ednica digital<\/span>\r\n <\/div>\r\n <div class=\"module-card\">\r\n <div class=\"module-icon\">\ud83e\uddb7<\/div>\r\n <div class=\"module-title\">Odontograma Digital<\/div>\r\n <p class=\"module-desc\">Motor SVG interactivo con drag & drop. Condiciones superpuestas por diente, colores cl\u00ednicos estandarizados y auditor\u00eda de cambios.<\/p>\r\n <span class=\"module-tag\">SVG + Vanilla JS<\/span>\r\n <\/div>\r\n <div class=\"module-card\">\r\n <div class=\"module-icon\">\ud83d\udd2c<\/div>\r\n <div class=\"module-title\">IA \u2014 An\u00e1lisis de Rx<\/div>\r\n <p class=\"module-desc\">Sube una radiograf\u00eda y detecta autom\u00e1ticamente hallazgos por diente FDI con nivel de certeza. El profesional valida y aplica al odontograma.<\/p>\r\n <span class=\"module-tag\">Claude API Vision<\/span>\r\n <\/div>\r\n <div class=\"module-card\">\r\n <div class=\"module-icon\">\ud83d\udcac<\/div>\r\n <div class=\"module-title\">Asistente Virtual<\/div>\r\n <p class=\"module-desc\">Chatbot inteligente en el portal del paciente. Responde consultas, muestra precios, horarios y permite solicitar turnos en 5 pasos \u2014 sin costo de API.<\/p>\r\n <span class=\"module-tag\">Costo $0<\/span>\r\n <\/div>\r\n <div class=\"module-card\">\r\n <div class=\"module-icon\">\ud83e\uddea<\/div>\r\n <div class=\"module-title\">Laboratorio Dental<\/div>\r\n <p class=\"module-desc\">Gesti\u00f3n completa de \u00f3rdenes al laboratorio: creaci\u00f3n, seguimiento de estado, vinculaci\u00f3n a pacientes y registro de recepciones.<\/p>\r\n <span class=\"module-tag\">Flujo completo<\/span>\r\n <\/div>\r\n <div class=\"module-card\">\r\n <div class=\"module-icon\">\ud83d\udcfa<\/div>\r\n <div class=\"module-title\">Sala de Espera<\/div>\r\n <p class=\"module-desc\">Pantalla p\u00fablica para TV con auto-refresh cada 20 segundos. Panel de recepci\u00f3n para registro de llegadas en tiempo real.<\/p>\r\n <span class=\"module-tag\">Pantalla TV<\/span>\r\n <\/div>\r\n <div class=\"module-card\">\r\n <div class=\"module-icon\">\ud83d\udcb0<\/div>\r\n <div class=\"module-title\">Facturaci\u00f3n<\/div>\r\n <p class=\"module-desc\">M\u00f3dulo de facturaci\u00f3n integrado con el nomenclador oficial de Mendoza. 121 procedimientos codificados en 14 categor\u00edas cl\u00ednicas.<\/p>\r\n <span class=\"module-tag\">Nomenclador Mendoza<\/span>\r\n <\/div>\r\n <div class=\"module-card\">\r\n <div class=\"module-icon\">\ud83d\udd10<\/div>\r\n <div class=\"module-title\">Roles y Permisos<\/div>\r\n <p class=\"module-desc\">Sistema granular de permisos por m\u00f3dulo y acci\u00f3n. Tres roles base (Admin, Odont\u00f3logo, Recepci\u00f3n) con capacidad de personalizaci\u00f3n avanzada.<\/p>\r\n <span class=\"module-tag\">RBAC completo<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- ODONTOGRAM FEATURE -->\r\n<section id=\"odontograma\" style=\"padding: 100px 0;\">\r\n <div class=\"container\">\r\n <div class=\"feature-split\">\r\n <div class=\"fade-up\">\r\n <div class=\"section-label\">Odontograma Digital<\/div>\r\n <h2>El odontograma<br>m\u00e1s <em>avanzado<\/em><br>del mercado<\/h2>\r\n <p style=\"font-size:0.95rem; color:var(--c-muted2); line-height:1.75; margin-bottom:24px; font-weight:300;\">Motor completo en JavaScript puro. M\u00e1s de 1.200 l\u00edneas de c\u00f3digo optimizado para una experiencia cl\u00ednica fluida y precisa. Permanentes y temporarios en la misma pantalla.<\/p>\r\n <ul style=\"list-style:none; display:flex; flex-direction:column; gap:12px; margin-bottom:32px;\">\r\n <li style=\"display:flex; align-items:flex-start; gap:12px;\">\r\n <span style=\"color:var(--c-cyan); margin-top:2px;\">\u2713<\/span>\r\n <span style=\"font-size:0.9rem; color:var(--c-muted2);\">Condiciones m\u00faltiples superpuestas por diente (endodoncia + corona + lesi\u00f3n periapical)<\/span>\r\n <\/li>\r\n <li style=\"display:flex; align-items:flex-start; gap:12px;\">\r\n <span style=\"color:var(--c-cyan); margin-top:2px;\">\u2713<\/span>\r\n <span style=\"font-size:0.9rem; color:var(--c-muted2);\">Drag & drop de condiciones desde paleta visual por grupos<\/span>\r\n <\/li>\r\n <li style=\"display:flex; align-items:flex-start; gap:12px;\">\r\n <span style=\"color:var(--c-cyan); margin-top:2px;\">\u2713<\/span>\r\n <span style=\"font-size:0.9rem; color:var(--c-muted2);\">Colores cl\u00ednicos estandarizados: azul (patolog\u00edas), rojo (realizados), verde (provisional)<\/span>\r\n <\/li>\r\n <li style=\"display:flex; align-items:flex-start; gap:12px;\">\r\n <span style=\"color:var(--c-cyan); margin-top:2px;\">\u2713<\/span>\r\n <span style=\"font-size:0.9rem; color:var(--c-muted2);\">Auditor\u00eda completa de cambios con motivo y usuario responsable<\/span>\r\n <\/li>\r\n <\/ul>\r\n <a href=\"#\" onclick=\"openModal(); return false;\" class=\"btn-primary\">Ver demo del odontograma \u2192<\/a>\r\n <\/div>\r\n <div class=\"fade-up fade-up-delay-1\">\r\n <div class=\"feature-visual\">\r\n <div style=\"font-size:0.75rem; color:var(--c-muted); margin-bottom:16px; display:flex; justify-content:space-between; align-items:center;\">\r\n <span>Odontograma \u2014 Vista workstation<\/span>\r\n <span style=\"color:var(--c-cyan);\">Diente 16 seleccionado<\/span>\r\n <\/div>\r\n\r\n <!-- Upper jaw -->\r\n <div style=\"margin-bottom:8px;\">\r\n <div style=\"font-size:0.6rem; color:var(--c-muted); text-align:center; margin-bottom:4px;\">Maxilar Superior<\/div>\r\n <div class=\"tooth-row\">\r\n <div class=\"tooth blue\">18<\/div>\r\n <div class=\"tooth blue\">17<\/div>\r\n <div class=\"tooth red\">16<\/div>\r\n <div class=\"tooth\" style=\"border-color:rgba(0,210,180,0.3);\">15<\/div>\r\n <div class=\"tooth blue\">14<\/div>\r\n <div class=\"tooth\" style=\"border-color:rgba(0,210,180,0.3);\">13<\/div>\r\n <div class=\"tooth red\">12<\/div>\r\n <div class=\"tooth red\">11<\/div>\r\n <div class=\"tooth red\">21<\/div>\r\n <div class=\"tooth\" style=\"border-color:rgba(0,210,180,0.3);\">22<\/div>\r\n <div class=\"tooth blue\">23<\/div>\r\n <div class=\"tooth\" style=\"border-color:rgba(0,210,180,0.3);\">24<\/div>\r\n <div class=\"tooth red\">25<\/div>\r\n <div class=\"tooth green\">26<\/div>\r\n <div class=\"tooth\" style=\"border-color:rgba(0,210,180,0.3);\">27<\/div>\r\n <div class=\"tooth blue\">28<\/div>\r\n <\/div>\r\n <\/div>\r\n <div style=\"height:1px; background:var(--c-border); margin:8px 0;\"><\/div>\r\n <!-- Lower jaw -->\r\n <div style=\"margin-bottom:16px;\">\r\n <div class=\"tooth-row\">\r\n <div class=\"tooth\" style=\"border-color:rgba(0,210,180,0.3);\">48<\/div>\r\n <div class=\"tooth blue\">47<\/div>\r\n <div class=\"tooth red\">46<\/div>\r\n <div class=\"tooth\" style=\"border-color:rgba(0,210,180,0.3);\">45<\/div>\r\n <div class=\"tooth red\">44<\/div>\r\n <div class=\"tooth green\">43<\/div>\r\n <div class=\"tooth\" style=\"border-color:rgba(0,210,180,0.3);\">42<\/div>\r\n <div class=\"tooth blue\">41<\/div>\r\n <div class=\"tooth blue\">31<\/div>\r\n <div class=\"tooth\" style=\"border-color:rgba(0,210,180,0.3);\">32<\/div>\r\n <div class=\"tooth red\">33<\/div>\r\n <div class=\"tooth\" style=\"border-color:rgba(0,210,180,0.3);\">34<\/div>\r\n <div class=\"tooth red\">35<\/div>\r\n <div class=\"tooth red\">36<\/div>\r\n <div class=\"tooth blue\">37<\/div>\r\n <div class=\"tooth\" style=\"border-color:rgba(0,210,180,0.3);\">38<\/div>\r\n <\/div>\r\n <div style=\"font-size:0.6rem; color:var(--c-muted); text-align:center; margin-top:4px;\">Maxilar Inferior<\/div>\r\n <\/div>\r\n\r\n <!-- Selected tooth panel -->\r\n <div style=\"background:rgba(0,0,0,0.3); border:1px solid var(--c-border); border-radius:10px; padding:14px;\">\r\n <div style=\"font-size:0.72rem; color:var(--c-muted); margin-bottom:10px;\">Diente 16 \u2014 Primer Molar Superior Derecho<\/div>\r\n <div style=\"display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px;\">\r\n <span style=\"background:rgba(220,53,69,0.15); border:1px solid rgba(220,53,69,0.3); color:#ff8a8a; border-radius:6px; padding:3px 9px; font-size:0.72rem;\">Endodoncia<\/span>\r\n <span style=\"background:rgba(220,53,69,0.15); border:1px solid rgba(220,53,69,0.3); color:#ff8a8a; border-radius:6px; padding:3px 9px; font-size:0.72rem;\">Corona<\/span>\r\n <\/div>\r\n <div style=\"font-size:0.7rem; color:var(--c-muted); font-style:italic;\">TC realizado 2024 \u2014 Sin s\u00edntomas actuales<\/div>\r\n <\/div>\r\n\r\n <div class=\"color-legend\">\r\n <div class=\"legend-item\">\r\n <div class=\"legend-dot\" style=\"background:#1565c0;\"><\/div> Patolog\u00edas\/A realizar\r\n <\/div>\r\n <div class=\"legend-item\">\r\n <div class=\"legend-dot\" style=\"background:#dc3545;\"><\/div> Realizados\r\n <\/div>\r\n <div class=\"legend-item\">\r\n <div class=\"legend-dot\" style=\"background:#2e7d32;\"><\/div> Provisional\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- IA FEATURE -->\r\n<section id=\"ia\" style=\"padding:100px 0; background:var(--c-surface); border-top:1px solid var(--c-border); border-bottom:1px solid var(--c-border);\">\r\n <div class=\"container\">\r\n <div class=\"feature-split reverse\">\r\n <div class=\"fade-up\">\r\n <div class=\"section-label\">Inteligencia Artificial<\/div>\r\n <h2>An\u00e1lisis de Rx<br>con <em>IA<\/em><\/h2>\r\n <p style=\"font-size:0.95rem; color:var(--c-muted2); line-height:1.75; margin-bottom:24px; font-weight:300;\">Sub\u00ed una radiograf\u00eda y nuestra integraci\u00f3n con IA analiza autom\u00e1ticamente los hallazgos cl\u00ednicos, los clasifica por diente FDI y los presenta con nivel de certeza para que el profesional valide.<\/p>\r\n <ul style=\"list-style:none; display:flex; flex-direction:column; gap:12px; margin-bottom:32px;\">\r\n <li style=\"display:flex; align-items:flex-start; gap:12px;\">\r\n <span style=\"color:var(--c-cyan); margin-top:2px;\">\u2713<\/span>\r\n <span style=\"font-size:0.9rem; color:var(--c-muted2);\">Acepta JPG, PNG y WebP \u2014 resultado en segundos<\/span>\r\n <\/li>\r\n <li style=\"display:flex; align-items:flex-start; gap:12px;\">\r\n <span style=\"color:var(--c-cyan); margin-top:2px;\">\u2713<\/span>\r\n <span style=\"font-size:0.9rem; color:var(--c-muted2);\">Certeza alta, media o baja por cada hallazgo detectado<\/span>\r\n <\/li>\r\n <li style=\"display:flex; align-items:flex-start; gap:12px;\">\r\n <span style=\"color:var(--c-cyan); margin-top:2px;\">\u2713<\/span>\r\n <span style=\"font-size:0.9rem; color:var(--c-muted2);\">El odont\u00f3logo valida con checkboxes antes de aplicar al odontograma<\/span>\r\n <\/li>\r\n <li style=\"display:flex; align-items:flex-start; gap:12px;\">\r\n <span style=\"color:var(--c-cyan); margin-top:2px;\">\u2713<\/span>\r\n <span style=\"font-size:0.9rem; color:var(--c-muted2);\">API key configurable desde el panel de administraci\u00f3n<\/span>\r\n <\/li>\r\n <\/ul>\r\n <a href=\"#\" onclick=\"openModal(); return false;\" class=\"btn-primary\">Probalo en la demo \u2192<\/a>\r\n <\/div>\r\n <div class=\"fade-up fade-up-delay-1\">\r\n <div class=\"ai-card\">\r\n <div class=\"ai-badge\">\u2726 IA cl\u00ednica activa<\/div>\r\n <div style=\"font-family:'Syne',sans-serif; font-size:1.1rem; font-weight:700; color:var(--c-white); margin-bottom:6px;\">An\u00e1lisis de Radiograf\u00eda<\/div>\r\n <div style=\"font-size:0.82rem; color:var(--c-muted2); margin-bottom:16px;\">Paciente: Garc\u00eda, Mar\u00eda \u2014 Ortopantomograf\u00eda completa<\/div>\r\n <div class=\"ai-scan-demo\">\r\n <div class=\"scan-header\">\r\n <span class=\"scan-title\">Hallazgos detectados por IA<\/span>\r\n <div class=\"scan-status\">\r\n <div class=\"scan-pulse\"><\/div>\r\n An\u00e1lisis completo\r\n <\/div>\r\n <\/div>\r\n <div class=\"scan-finding\">\r\n <div class=\"scan-finding-info\">\r\n <div class=\"scan-finding-tooth\">36<\/div>\r\n <span class=\"scan-finding-text\">Caries interproximal profunda<\/span>\r\n <\/div>\r\n <span class=\"badge-high\">Alta certeza<\/span>\r\n <\/div>\r\n <div class=\"scan-finding\">\r\n <div class=\"scan-finding-info\">\r\n <div class=\"scan-finding-tooth\">16<\/div>\r\n <span class=\"scan-finding-text\">Lesi\u00f3n periapical incipiente<\/span>\r\n <\/div>\r\n <span class=\"badge-high\">Alta certeza<\/span>\r\n <\/div>\r\n <div class=\"scan-finding\">\r\n <div class=\"scan-finding-info\">\r\n <div class=\"scan-finding-tooth\">24<\/div>\r\n <span class=\"scan-finding-text\">Posible caries oclusal<\/span>\r\n <\/div>\r\n <span class=\"badge-med\">Certeza media<\/span>\r\n <\/div>\r\n <div class=\"scan-finding\">\r\n <div class=\"scan-finding-info\">\r\n <div class=\"scan-finding-tooth\">48<\/div>\r\n <span class=\"scan-finding-text\">Erupci\u00f3n parcial, posible retenci\u00f3n<\/span>\r\n <\/div>\r\n <span class=\"badge-low\">Certeza baja<\/span>\r\n <\/div>\r\n <\/div>\r\n <div style=\"margin-top:16px; display:flex; gap:10px;\">\r\n <button style=\"flex:1; background:var(--c-cyan); color:#050a0f; border:none; border-radius:8px; padding:10px; font-size:0.82rem; font-weight:600; cursor:pointer; font-family:'DM Sans',sans-serif;\">Aplicar al odontograma<\/button>\r\n <button style=\"flex:1; background:transparent; border:1px solid var(--c-border); color:var(--c-muted2); border-radius:8px; padding:10px; font-size:0.82rem; cursor:pointer; font-family:'DM Sans',sans-serif;\">Revisar uno a uno<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- PORTAL + CHAT -->\r\n<section id=\"portal\" style=\"padding:100px 0;\">\r\n <div class=\"container\">\r\n <div style=\"text-align:center; margin-bottom:70px;\">\r\n <div class=\"section-label\">Portal y Comunicaci\u00f3n<\/div>\r\n <h2>El paciente tambi\u00e9n<br>tiene su <em>espacio<\/em><\/h2>\r\n <p class=\"section-sub\" style=\"margin:0 auto;\">Portal web completo para que tus pacientes consulten turnos, historial, archivos y se comuniquen \u2014 accesible desde cualquier dispositivo.<\/p>\r\n <\/div>\r\n\r\n <div class=\"portal-grid fade-up\">\r\n <!-- Portal phones -->\r\n <div class=\"portal-phones\">\r\n <div class=\"phone-frame\">\r\n <div class=\"phone-notch\"><div class=\"notch-bar\"><\/div><\/div>\r\n <div class=\"phone-body\">\r\n <div class=\"phone-header\">Portal del Paciente<\/div>\r\n <div class=\"phone-card\">\r\n <div class=\"phone-card-title\">Pr\u00f3ximo turno<\/div>\r\n <div class=\"phone-card-val cyan\">Jue 2 Mayo \u00b7 10:00<\/div>\r\n <\/div>\r\n <div class=\"phone-card\">\r\n <div class=\"phone-card-title\">Profesional<\/div>\r\n <div class=\"phone-card-val\" style=\"font-size:0.72rem;\">Dr. C. G\u00f3mez<\/div>\r\n <\/div>\r\n <div class=\"phone-card\">\r\n <div class=\"phone-card-title\">\u00daltimo procedimiento<\/div>\r\n <div class=\"phone-card-val\" style=\"font-size:0.7rem;\">ODO.04.03 \u00b7 Obturaci\u00f3n<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"phone-tab-bar\">\r\n <div class=\"phone-tab active\"><span class=\"phone-tab-icon\">\ud83d\udcc5<\/span>Turnos<\/div>\r\n <div class=\"phone-tab\"><span class=\"phone-tab-icon\">\ud83d\udccb<\/span>Historial<\/div>\r\n <div class=\"phone-tab\"><span class=\"phone-tab-icon\">\ud83d\udcc1<\/span>Archivos<\/div>\r\n <div class=\"phone-tab\"><span class=\"phone-tab-icon\">\ud83d\udc64<\/span>Perfil<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"phone-frame tall\">\r\n <div class=\"phone-notch\"><div class=\"notch-bar\"><\/div><\/div>\r\n <div class=\"phone-body\">\r\n <div class=\"phone-header\">Mis Archivos \ud83d\udcc1<\/div>\r\n <div class=\"phone-card\">\r\n <div class=\"phone-card-title\">Radiograf\u00eda periapical<\/div>\r\n <div class=\"phone-card-val cyan\" style=\"font-size:0.65rem;\">15 Mar 2025 \u00b7 2.4 MB<\/div>\r\n <\/div>\r\n <div class=\"phone-card\">\r\n <div class=\"phone-card-title\">Ortopantomograf\u00eda<\/div>\r\n <div class=\"phone-card-val\" style=\"font-size:0.65rem; color:var(--c-muted2);\">20 Ene 2025 \u00b7 5.1 MB<\/div>\r\n <\/div>\r\n <div class=\"phone-card\">\r\n <div class=\"phone-card-title\">Consentimiento firmado<\/div>\r\n <div class=\"phone-card-val\" style=\"font-size:0.65rem; color:var(--c-muted2);\">05 Dic 2024 \u00b7 PDF<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"phone-tab-bar\">\r\n <div class=\"phone-tab\"><span class=\"phone-tab-icon\">\ud83d\udcc5<\/span>Turnos<\/div>\r\n <div class=\"phone-tab\"><span class=\"phone-tab-icon\">\ud83d\udccb<\/span>Historial<\/div>\r\n <div class=\"phone-tab active\"><span class=\"phone-tab-icon\">\ud83d\udcc1<\/span>Archivos<\/div>\r\n <div class=\"phone-tab\"><span class=\"phone-tab-icon\">\ud83d\udc64<\/span>Perfil<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Chat demo -->\r\n <div>\r\n <div class=\"chat-demo\">\r\n <div class=\"chat-header\">\r\n <div class=\"chat-avatar\">\ud83e\uddb7<\/div>\r\n <div>\r\n <div class=\"chat-name\">Asistente OdontoSist<\/div>\r\n <div class=\"chat-online\">En l\u00ednea ahora<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"chat-messages\">\r\n <div class=\"msg msg-bot\">\u00a1Hola! Soy el asistente de la cl\u00ednica. \u00bfEn qu\u00e9 puedo ayudarte hoy?<\/div>\r\n <div class=\"msg msg-user\">Quiero pedir un turno<\/div>\r\n <div class=\"msg msg-bot\">\r\n \u00a1Perfecto! \u00bfQu\u00e9 especialidad necesit\u00e1s?\r\n <div class=\"chat-chips\">\r\n <div class=\"chip\">Ortodoncia<\/div>\r\n <div class=\"chip\">Endodoncia<\/div>\r\n <div class=\"chip\">Periodoncia<\/div>\r\n <div class=\"chip\">General<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"msg msg-user\">Endodoncia<\/div>\r\n <div class=\"msg msg-bot\">\r\n Tenemos disponibilidad con el Dr. G\u00f3mez. \u00bfQu\u00e9 d\u00eda prefer\u00eds?\r\n <div class=\"chat-chips\">\r\n <div class=\"chip\">Lun 29<\/div>\r\n <div class=\"chip\">Mar 30<\/div>\r\n <div class=\"chip\">Mi\u00e9 1<\/div>\r\n <div class=\"chip\">Jue 2<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div style=\"margin-top:20px; padding:16px 20px; background:var(--c-surface); border:1px solid var(--c-border); border-radius:12px;\">\r\n <div style=\"font-size:0.8rem; color:var(--c-muted); margin-bottom:4px;\">Motor del asistente<\/div>\r\n <div style=\"font-size:0.9rem; color:var(--c-muted2);\">PHP puro \u00b7 detecci\u00f3n por palabras clave \u00b7 5 pasos guiados \u00b7 <span style=\"color:var(--c-cyan); font-weight:500;\">$0 de costo de API<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- TESTIMONIALS -->\r\n<section style=\"padding:100px 0; background:var(--c-surface); border-top:1px solid var(--c-border); border-bottom:1px solid var(--c-border);\">\r\n <div class=\"container\">\r\n <div style=\"text-align:center; margin-bottom:60px;\">\r\n <div class=\"section-label\">Casos de uso<\/div>\r\n <h2>Confiado por<br>profesionales <em>reales<\/em><\/h2>\r\n <\/div>\r\n <div class=\"trust-grid fade-up\">\r\n <div class=\"trust-card\">\r\n <div class=\"trust-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <p class=\"trust-text\">\"El odontograma digital cambi\u00f3 completamente la manera en que llevo las historias cl\u00ednicas. Poder superponer condiciones y tener auditor\u00eda de cambios es invaluable para un consultorio de especialidades.\"<\/p>\r\n <div class=\"trust-author\">\r\n <div class=\"trust-avatar ta1\">CG<\/div>\r\n <div>\r\n <div class=\"trust-name\">Dr. Carlos G\u00f3mez<\/div>\r\n <div class=\"trust-role\">Odont\u00f3logo especialista \u2014 Mendoza<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"trust-card\">\r\n <div class=\"trust-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <p class=\"trust-text\">\"La sala de espera en pantalla TV y el panel de recepci\u00f3n hicieron que la experiencia del paciente mejorara notablemente. El flujo de llegada ahora es ordenado y profesional.\"<\/p>\r\n <div class=\"trust-author\">\r\n <div class=\"trust-avatar ta2\">LP<\/div>\r\n <div>\r\n <div class=\"trust-name\">Laura P\u00e9rez<\/div>\r\n <div class=\"trust-role\">Recepcionista \u2014 Cl\u00ednica Dental Norte<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"trust-card\">\r\n <div class=\"trust-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <p class=\"trust-text\">\"El an\u00e1lisis de radiograf\u00edas con IA es una herramienta de diagn\u00f3stico incre\u00edble. El sistema detecta hallazgos que a veces uno puede pasar por alto en una primera revisi\u00f3n r\u00e1pida.\"<\/p>\r\n <div class=\"trust-author\">\r\n <div class=\"trust-avatar ta3\">MR<\/div>\r\n <div>\r\n <div class=\"trust-name\">Dra. Martina R\u00edos<\/div>\r\n <div class=\"trust-role\">Odont\u00f3loga \u2014 Centro de Diagn\u00f3stico Oral<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- CTA FINAL -->\r\n<section class=\"cta-section\">\r\n <div class=\"container\">\r\n <div class=\"cta-box fade-up\">\r\n <div class=\"section-label\" style=\"margin:0 auto 20px; display:table;\">Demo disponible ahora<\/div>\r\n <h2>Prob\u00e1 OdontoSist<br>sin compromiso<\/h2>\r\n <p class=\"section-sub\">Acced\u00e9 con credenciales de demo y explor\u00e1 todo el sistema. Sin instalaci\u00f3n, sin tarjeta de cr\u00e9dito.<\/p>\r\n <div class=\"cta-actions\">\r\n <a href=\"#\" onclick=\"openModal(); return false;\" class=\"btn-primary btn-lg\">Acceder a la Demo \u2192<\/a>\r\n <a href=\"https:\/\/vectora.ar\/en\/sistodonto\/\" target=\"_blank\" class=\"btn-ghost btn-lg\">Ir al sistema \u2197<\/a>\r\n <\/div>\r\n <div style=\"margin-top:32px; display:flex; gap:24px; justify-content:center; flex-wrap:wrap;\">\r\n <span style=\"display:flex; align-items:center; gap:6px; font-size:0.82rem; color:var(--c-muted2);\">\r\n <span style=\"color:var(--c-cyan);\">\u2713<\/span> Sin instalaci\u00f3n\r\n <\/span>\r\n <span style=\"display:flex; align-items:center; gap:6px; font-size:0.82rem; color:var(--c-muted2);\">\r\n <span style=\"color:var(--c-cyan);\">\u2713<\/span> 3 roles de acceso\r\n <\/span>\r\n <span style=\"display:flex; align-items:center; gap:6px; font-size:0.82rem; color:var(--c-muted2);\">\r\n <span style=\"color:var(--c-cyan);\">\u2713<\/span> Datos de ejemplo reales\r\n <\/span>\r\n <span style=\"display:flex; align-items:center; gap:6px; font-size:0.82rem; color:var(--c-muted2);\">\r\n <span style=\"color:var(--c-cyan);\">\u2713<\/span> Portal del paciente incluido\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- FOOTER -->\r\n<footer>\r\n <div class=\"container\">\r\n <div class=\"footer-inner\">\r\n <div class=\"footer-brand\">\r\n <div class=\"nav-logo\" style=\"margin-bottom:0;\">\r\n <div class=\"logo-icon\">\ud83e\uddb7<\/div>\r\n Odonto<span style=\"color:var(--c-cyan);\">Sist<\/span>\r\n <\/div>\r\n <p>Sistema de gesti\u00f3n odontol\u00f3gica completo. Dise\u00f1ado para consultorios y cl\u00ednicas dentales que buscan digitalizar y optimizar su pr\u00e1ctica cl\u00ednica.<\/p>\r\n <\/div>\r\n <div>\r\n <div class=\"footer-col-title\">Sistema<\/div>\r\n <ul class=\"footer-links\">\r\n <li><a href=\"#modulos\">M\u00f3dulos<\/a><\/li>\r\n <li><a href=\"#odontograma\">Odontograma<\/a><\/li>\r\n <li><a href=\"#ia\">IA Cl\u00ednica<\/a><\/li>\r\n <li><a href=\"#portal\">Portal Paciente<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div>\r\n <div class=\"footer-col-title\">Demo<\/div>\r\n <ul class=\"footer-links\">\r\n <li><a href=\"https:\/\/vectora.ar\/en\/sistodonto\/\" target=\"_blank\">Acceso Admin<\/a><\/li>\r\n <li><a href=\"https:\/\/vectora.ar\/en\/sistodonto\/\" target=\"_blank\">Acceso Odont\u00f3logo<\/a><\/li>\r\n <li><a href=\"https:\/\/vectora.ar\/en\/sistodonto\/\" target=\"_blank\">Acceso Recepci\u00f3n<\/a><\/li>\r\n <li><a href=\"https:\/\/vectora.ar\/sistodonto\/modules\/portal_paciente\/login_portal.php\" target=\"_blank\">Portal Paciente<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div>\r\n <div class=\"footer-col-title\">Tecnolog\u00eda<\/div>\r\n <ul class=\"footer-links\">\r\n <li><a href=\"#\">PHP 8 + MySQL 8<\/a><\/li>\r\n <li><a href=\"#\">Bootstrap 5.3<\/a><\/li>\r\n <li><a href=\"#\">FullCalendar 6<\/a><\/li>\r\n <li><a href=\"#\">IA API<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <div class=\"footer-bottom\">\r\n <span>\u00a9 2026 OdontoSist \u2014 Sistema de gesti\u00f3n odontol\u00f3gica<\/span>\r\n <span>Desarrollado sobre <a href=\"https:\/\/vectora.ar\/en\/\" target=\"_blank\">vectora.ar<\/a><\/span>\r\n <\/div>\r\n <\/div>\r\n<\/footer>\r\n\r\n<!-- DEMO MODAL -->\r\n<div class=\"modal-overlay\" id=\"demoModal\" onclick=\"handleOverlayClick(event)\">\r\n <div class=\"modal-box\">\r\n <div class=\"modal-close\" onclick=\"closeModal()\">\u2715<\/div>\r\n <h3>Acced\u00e9 a la Demo<\/h3>\r\n <p class=\"modal-sub\">Eleg\u00ed el rol con el que quer\u00e9s explorar el sistema. Todos los datos son de ejemplo.<\/p>\r\n\r\n <div class=\"cred-table\">\r\n <div class=\"cred-row\">\r\n <span class=\"cred-label\">URL del sistema<\/span>\r\n <span class=\"cred-val\">vectora.ar\/sistodonto<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"modal-access-btn\">\r\n <a href=\"https:\/\/vectora.ar\/en\/sistodonto\/\" target=\"_blank\" class=\"access-btn\">\r\n <div class=\"access-btn-info\">\r\n <div class=\"access-btn-role\">\ud83d\udc51 Administrador<\/div>\r\n <div class=\"access-btn-cred\">admin \u00b7 Admin1234!<\/div>\r\n <\/div>\r\n <span class=\"access-btn-arrow\">\u2192<\/span>\r\n <\/a>\r\n <a href=\"https:\/\/vectora.ar\/en\/sistodonto\/\" target=\"_blank\" class=\"access-btn\">\r\n <div class=\"access-btn-info\">\r\n <div class=\"access-btn-role\">\ud83e\uddb7 Odont\u00f3logo<\/div>\r\n <div class=\"access-btn-cred\">cgomez \u00b7 password<\/div>\r\n <\/div>\r\n <span class=\"access-btn-arrow\">\u2192<\/span>\r\n <\/a>\r\n <a href=\"https:\/\/vectora.ar\/en\/sistodonto\/\" target=\"_blank\" class=\"access-btn\">\r\n <div class=\"access-btn-info\">\r\n <div class=\"access-btn-role\">\ud83d\uddc2 Recepci\u00f3n<\/div>\r\n <div class=\"access-btn-cred\">lperez \u00b7 password<\/div>\r\n <\/div>\r\n <span class=\"access-btn-arrow\">\u2192<\/span>\r\n <\/a>\r\n <a href=\"https:\/\/vectora.ar\/sistodonto\/modules\/portal_paciente\/login_portal.php\" target=\"_blank\" class=\"access-btn\" style=\"border-color:var(--c-border2);\">\r\n <div class=\"access-btn-info\">\r\n <div class=\"access-btn-role\" style=\"color:var(--c-cyan);\">\ud83c\udf10 Portal del Paciente<\/div>\r\n <div class=\"access-btn-cred\">Acceso separado con DNI + PIN<\/div>\r\n <\/div>\r\n <span class=\"access-btn-arrow\">\u2192<\/span>\r\n <\/a>\r\n <\/div>\r\n <p class=\"modal-note\">Los datos pueden modificarse libremente \u2014 es un entorno de prueba.<\/p>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n \/\/ Nav scroll effect\r\n const nav = document.getElementById('mainNav');\r\n window.addEventListener('scroll', () => {\r\n nav.classList.toggle('scrolled', window.scrollY > 40);\r\n });\r\n\r\n \/\/ Intersection observer for fade-up\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach(e => {\r\n if (e.isIntersecting) {\r\n e.target.classList.add('visible');\r\n }\r\n });\r\n }, { threshold: 0.1 });\r\n\r\n document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));\r\n\r\n \/\/ Modal\r\n function openModal() {\r\n document.getElementById('demoModal').classList.add('open');\r\n document.body.style.overflow = 'hidden';\r\n }\r\n function closeModal() {\r\n document.getElementById('demoModal').classList.remove('open');\r\n document.body.style.overflow = '';\r\n }\r\n function handleOverlayClick(e) {\r\n if (e.target === document.getElementById('demoModal')) closeModal();\r\n }\r\n document.addEventListener('keydown', e => { if (e.key === 'Escape') closeModal(); });\r\n\r\n \/\/ Animate chart bars on scroll\r\n const chartObs = new IntersectionObserver((entries) => {\r\n entries.forEach(e => {\r\n if (e.isIntersecting) {\r\n e.target.querySelectorAll('.chart-bar').forEach((bar, i) => {\r\n bar.style.transition = `height 0.6s ease ${i * 0.08}s`;\r\n });\r\n }\r\n });\r\n });\r\n document.querySelectorAll('.mini-chart').forEach(el => chartObs.observe(el));\r\n<\/script>\r\n<\/body>\r\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>OdontoSist \u2014 Sistema de Gesti\u00f3n Odontol\u00f3gica de Vanguardia \ud83e\uddb7 OdontoSist M\u00f3dulos Odontograma Cl\u00ednica Portal Demo Ver Demo Ingresar \u2192 Sistema de gesti\u00f3n odontol\u00f3gica El futuro de tuconsultorio dentalya lleg\u00f3 Gesti\u00f3n completa de pacientes, turnos inteligentes, odontograma digital, inteligencia artificial y portal del paciente \u2014 todo integrado, todo en uno. Acceder a la Demo \u2192 Ver […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-13673","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/vectora.ar\/en\/wp-json\/wp\/v2\/pages\/13673","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vectora.ar\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vectora.ar\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vectora.ar\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vectora.ar\/en\/wp-json\/wp\/v2\/comments?post=13673"}],"version-history":[{"count":28,"href":"https:\/\/vectora.ar\/en\/wp-json\/wp\/v2\/pages\/13673\/revisions"}],"predecessor-version":[{"id":13705,"href":"https:\/\/vectora.ar\/en\/wp-json\/wp\/v2\/pages\/13673\/revisions\/13705"}],"wp:attachment":[{"href":"https:\/\/vectora.ar\/en\/wp-json\/wp\/v2\/media?parent=13673"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}