Informática Curso Completo

<!DOCTYPE html>
<html lang="pt-br" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Curso de Informática Completo | Inova Educacional</title>
    
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" />

<script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            DEFAULT: '#254e8c', 
                            dark: '#1e3f70',
                            light: '#366bc2'
                        },
                        secondary: {
                            DEFAULT: '#f37021', 
                            dark: '#d65b14',
                            light: '#f79354'
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                    },
                    animation: {
                        'blob': 'blob 7s infinite',
                        'shimmer': 'shimmer 1.5s infinite',
                    },
                    keyframes: {
                        blob: {
                            '0%': { transform: 'translate(0px, 0px) scale(1)' },
                            '33%': { transform: 'translate(30px, -50px) scale(1.1)' },
                            '66%': { transform: 'translate(-20px, 20px) scale(0.9)' },
                            '100%': { transform: 'translate(0px, 0px) scale(1)' },
                        },
                        shimmer: {
                            '100%': { transform: 'translateX(100%)' }
                        }
                    }
                }
            }
        }
    </script>

/* Variáveis do Simulador Interativo */
            --wallpaper-url: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAFYGcSPVHRuekl7V7QUzQQHBhxM4MSf4P_S9HrQRFURCiYEKFtJNZzXt_bkGMQcsalTiLg31yBLJlsNZrKFhHZY_GINHp2hgxxOfFpYmJ88qVHn-vDOgCejcp4JLXvfv_jK8CA4sTqWRcINuYVqEEBLBlC2m5BXd7BHjbMEa9Ijwj1mGa7sjOZWFkmHU/s1600/photo-1618005182384-a83a8bd57fbe.png');
            --glass-bg: rgba(255, 255, 255, 0.4);
            --glass-border: rgba(255, 255, 255, 0.5);
            --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
            --sim-text-color: #202020;
            --taskbar-height: 48px;
            --monitor-border: #1a1a1a;
            --monitor-stand: #cccccc;
        }

* { box-sizing: border-box; }

body {
            font-family: 'Inter', sans-serif;
            background: var(--light);
            color: var(--text);
            margin: 0;
            line-height: 1.6;
            overflow-x: hidden;
            padding-bottom: 60px;
        }

/* --- Utilities --- */
        .container-custom { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
        .text-center { text-align: center; }
        .text-orange { color: var(--orange); }
        .text-blue { color: var(--blue); }
        
        /* Animação de Pulso Urgente */
        .btn-pulse { animation: pulse 2s infinite; }
        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.7); }
            70% { box-shadow: 0 0 0 10px rgba(249, 115, 22, 0); }
            100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); }
        }

/* --- Scarcity Banner --- */
        .scarcity-banner {
            background: #ef4444; 
            color: white;
            text-align: center;
            padding: 10px;
            font-weight: 700;
            font-size: 0.9rem;
            position: sticky;
            top: 0;
            z-index: 1100;
        }
        .scarcity-banner i { margin-right: 5px; }

/* --- Hero Section --- */
        .hero {
            background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
            color: white;
            padding: 60px 0 80px;
            position: relative;
            overflow: hidden;
        }
        
        .hero::before {
            content: '';
            position: absolute;
            top: -50px; right: -50px;
            width: 300px; height: 300px;
            background: var(--orange);
            opacity: 0.1;
            border-radius: 50%;
            filter: blur(80px);
        }

.hero-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            align-items: center;
        }

.hero-text h1 {
            font-size: 2.5rem;
            font-weight: 800;
            margin-bottom: 15px;
            line-height: 1.2;
        }

.badge-carga {
            background: var(--orange);
            color: white;
            padding: 6px 16px;
            border-radius: 50px;
            font-weight: 700;
            font-size: 0.9rem;
            display: inline-block;
            margin-bottom: 15px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

.hero-list {
            list-style: none;
            padding: 0;
            margin: 20px 0;
        }
        .hero-list li { margin-bottom: 10px; display: flex; align-items: center; gap: 10px; font-size: 1.1rem; }
        .hero-list i { color: var(--orange); }

.hero-media {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .main-hero-img {
            width: 100%;
            border-radius: 16px;
            box-shadow: 0 20px 25px -5px rgba(0,0,0,0.3);
            border: 4px solid rgba(255,255,255,0.1);
            object-fit: cover;
            max-height: 300px;
        }

.video-wrapper {
            position: relative;
            background: #000;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 20px 25px -5px rgba(0,0,0,0.3);
            border: 4px solid rgba(255,255,255,0.1);
            aspect-ratio: 16/9;
        }

.video-wrapper iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }

/* --- Modules Section --- */
        .modules-section { padding: 60px 0; background: white; }
        .section-title {
            font-size: 2rem;
            color: var(--blue);
            font-weight: 800;
            text-align: center;
            margin-bottom: 40px;
        }
        
        .modules-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 25px;
        }

.module-card {
            background: var(--light);
            padding: 25px;
            border-radius: 12px;
            border-left: 4px solid var(--orange);
            transition: transform 0.3s ease;
        }
        .module-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
        .module-icon { font-size: 2rem; color: var(--blue); margin-bottom: 15px; }
        .module-card h3 { margin: 0 0 10px 0; color: var(--text); }
        .module-card p { font-size: 0.9rem; color: var(--gray); margin: 0; }

/* --- STREAMING_CHUNK:Adding Simulator Styles --- */
        /* --- ESTILOS DO SIMULADOR INTERATIVO --- */
        #simulator-container {
            position: relative;
            width: 100%;
            height: 720px;
            background: radial-gradient(circle at center, #f0f4f8 0%, #d1d8e0 100%);
            border-radius: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            box-shadow: inset 0 0 20px rgba(0,0,0,0.05), 0 10px 30px rgba(0,0,0,0.1);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            user-select: none; /* Previne seleção ao arrastar */
        }

#monitor-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            transform-origin: center center;
            z-index: 10;
            transition: transform 0.1s ease-out; /* Suaviza o redimensionamento */
        }

#monitor {
            width: 1000px;
            height: 600px; 
            background-color: var(--monitor-border);
            border-radius: 12px;
            padding: 15px 15px 25px 15px;
            box-shadow: 0 20px 50px rgba(0,0,0,0.5), inset 0 0 0 2px #333;
            position: relative;
        }

#monitor::after {
            content: '';
            position: absolute;
            bottom: 8px;
            right: 25px;
            width: 6px;
            height: 6px;
            background: #0f0;
            border-radius: 50%;
            box-shadow: 0 0 5px #0f0;
        }

.monitor-stand-neck {
            width: 120px;
            height: 60px;
            background: linear-gradient(to right, #999, #eee, #999);
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
            box-shadow: inset 0 10px 10px rgba(0,0,0,0.5);
            z-index: 9;
        }

.monitor-stand-base {
            width: 300px;
            height: 20px;
            background: linear-gradient(to bottom, #ddd, #999);
            border-radius: 10px 10px 0 0;
            box-shadow: 0 10px 20px rgba(0,0,0,0.3);
            z-index: 9;
        }

#screen {
            width: 100%;
            height: 100%;
            background-image: var(--wallpaper-url);
            background-size: cover;
            background-position: center;
            border-radius: 4px;
            position: relative;
            overflow: hidden;
            cursor: default;
        }

#desktop {
            width: 100%;
            height: calc(100% - var(--taskbar-height));
            position: relative;
            padding: 10px;
        }

.desktop-icon {
            position: absolute;
            width: 80px;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10px 5px;
            border-radius: 8px;
            cursor: pointer;
            transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
            text-align: center;
            border: 1px solid transparent;
        }

.desktop-icon:hover {
            transform: scale(1.1);
            background-color: rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.4);
            backdrop-filter: blur(5px);
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }

.desktop-icon svg { width: 40px; height: 40px; margin-bottom: 5px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }
        .desktop-icon span { color: #fff; font-size: 12px; text-shadow: 1px 1px 2px rgba(0,0,0,0.8); font-weight: 500; }

#taskbar {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: var(--taskbar-height);
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-top: 1px solid var(--glass-border);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

.taskbar-btn {
            width: 36px;
            height: 36px;
            border-radius: 6px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 5px;
            cursor: pointer;
            transition: background-color 0.2s, transform 0.1s;
        }

.taskbar-btn:hover { background-color: rgba(255, 255, 255, 0.8); transform: scale(1.1); }

#start-menu {
            position: absolute;
            bottom: calc(var(--taskbar-height) + 10px);
            left: 50%;
            transform: translateX(-50%) translateY(20px);
            width: 400px;
            height: 350px;
            background: rgba(243, 243, 243, 0.85);
            backdrop-filter: blur(25px);
            -webkit-backdrop-filter: blur(25px);
            border: 1px solid var(--glass-border);
            border-radius: 12px;
            box-shadow: var(--glass-shadow);
            z-index: 999;
            padding: 20px;
            display: flex;
            flex-direction: column;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

#start-menu.active { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
        .start-menu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-top: 15px; }
        .start-menu-item { display: flex; flex-direction: column; align-items: center; padding: 10px; border-radius: 6px; cursor: pointer; transition: background-color 0.2s, transform 0.2s; }
        .start-menu-item:hover { background-color: rgba(255, 255, 255, 0.9); transform: scale(1.1); box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        .start-menu-item svg { width: 32px; height: 32px; margin-bottom: 8px; }
        .start-menu-item span { font-size: 11px; color: var(--sim-text-color); text-align: center;}

/* --- STREAMING_CHUNK:Styling Simulator Windows --- */
        .app-window {
            position: absolute;
            width: 600px;
            min-height: 350px;
            height: 450px;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255,255,255,0.8);
            border-radius: 10px;
            box-shadow: var(--glass-shadow);
            display: none;
            flex-direction: column;
            top: 50px;
            left: 50px;
            overflow: hidden;
            opacity: 0;
            transform: scale(0.9);
            transition: width 0.3s ease, height 0.3s ease;
        }

.app-window.maximized { top: 0 !important; left: 0 !important; width: 100% !important; height: calc(100% - var(--taskbar-height)) !important; border-radius: 4px 4px 0 0; }
        @keyframes windowOpen { 0% { opacity: 0; transform: scale(0.85); } 100% { opacity: 1; transform: scale(1); } }
        .app-window.open { display: flex; animation: windowOpen 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }

.window-header {
            height: 35px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 10px 0 15px;
            background: rgba(240, 240, 240, 0.8);
            border-bottom: 1px solid #ccc;
            cursor: grab;
            flex-shrink: 0;
        }
        .window-header:active { cursor: grabbing; }
        .window-title { font-size: 13px; font-weight: 600; color: var(--sim-text-color); display: flex; align-items: center; gap: 8px; }
        .window-title svg { width: 16px; height: 16px; }
        .window-controls { display: flex; gap: 8px; }
        .window-btn { width: 14px; height: 14px; border-radius: 50%; border: none; cursor: pointer; transition: filter 0.2s; }
        .window-btn:hover { filter: brightness(0.8); }
        .btn-close { background-color: #ff5f56; }
        .btn-min { background-color: #ffbd2e; }
        .btn-max { background-color: #27c93f; }

.window-content { flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; background: #fff; }

/* UIs Específicas do Simulador */
        .app-info-box {
            display: flex; align-items: center; gap: 15px; padding: 12px 20px; margin: 10px;
            border-radius: 6px; font-size: 13px; color: #333; background: #f8f9fa;
            border-left: 5px solid #ccc; box-shadow: 0 2px 5px rgba(0,0,0,0.05); flex-shrink: 0;
        }
        .app-info-box svg { width: 32px; height: 32px; flex-shrink: 0; }
        .app-info-box strong { display: block; font-size: 14px; margin-bottom: 4px; }
        .app-info-box p { line-height: 1.4; user-select: text; margin: 0; }

.app-workspace { flex-grow: 1; overflow: auto; position: relative; background-color: #f0f2f5; }
        .app-toolbar { display: flex; gap: 5px; padding: 8px 10px; background: #f3f4f6; border-bottom: 1px solid #e5e7eb; flex-shrink: 0; }
        .toolbar-btn { padding: 5px 10px; background: #fff; border: 1px solid #d1d5db; border-radius: 4px; font-size: 12px; cursor: pointer; color: #374151; }
        .toolbar-btn:hover { background: #e5e7eb; }

/* Word */
        .word-page-container { padding: 20px; display: flex; justify-content: center; }
        .word-page { width: 100%; max-width: 600px; min-height: 400px; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.1); padding: 40px; user-select: text; outline: none; font-family: 'Times New Roman', Times, serif; font-size: 16px; line-height: 1.5; }
        .word-page[contenteditable]:empty::before { content: "Comece a digitar seu documento aqui..."; color: #999; }
        
        /* Excel */
        .excel-table { border-collapse: collapse; width: 100%; background: #fff; user-select: text; }
        .excel-table th, .excel-table td { border: 1px solid #d1d5db; padding: 4px 8px; font-size: 13px; min-width: 80px; height: 25px; }
        .excel-table th { background: #f3f4f6; color: #4b5563; font-weight: normal; text-align: center; }
        .excel-table td { outline: none; }
        .excel-table td:focus { border: 2px solid #217346; box-shadow: inset 0 0 0 1px #217346; }

/* PPT */
        .ppt-layout { display: flex; height: 100%; }
        .ppt-sidebar { width: 120px; background: #fff; border-right: 1px solid #e5e7eb; padding: 10px; display: flex; flex-direction: column; gap: 10px; }
        .ppt-thumb { width: 100%; height: 60px; background: #f8f9fa; border: 2px solid #B7472A; border-radius: 4px; }
        .ppt-main { flex-grow: 1; padding: 20px; display: flex; justify-content: center; align-items: center; background: #e9ecef; }
        .ppt-slide { width: 100%; max-width: 500px; aspect-ratio: 16/9; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.1); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; text-align: center; user-select: text; outline: none; }

/* Explorer */
        .explorer-layout { display: flex; height: 100%; }
        .explorer-sidebar { width: 150px; background: #f8f9fa; border-right: 1px solid #e5e7eb; padding: 10px; font-size: 12px; }
        .explorer-sidebar ul { list-style: none; margin: 0; padding: 0; }
        .explorer-sidebar li { padding: 5px; cursor: pointer; color: #374151; margin-bottom: 2px; }
        .explorer-sidebar li:hover { background: #e5e7eb; border-radius: 4px; }
        .explorer-main { padding: 15px; display: flex; gap: 15px; align-content: flex-start; flex-wrap: wrap; background: #fff; flex-grow: 1; }
        .file-icon { display: flex; flex-direction: column; align-items: center; font-size: 11px; width: 60px; text-align: center; gap: 5px; cursor: pointer; }
        .file-icon svg { width: 32px; height: 32px; }

/* Internet */
        .browser-bar { display: flex; gap: 10px; padding: 8px; background: #e5e7eb; align-items: center; border-bottom: 1px solid #d1d5db;}
        .browser-address { flex-grow: 1; padding: 5px 10px; border-radius: 15px; border: 1px solid #ccc; font-size: 12px; background: #fff; user-select: text; }
        .google-page { padding: 20px 40px; background: #fff; min-height: 100%; }
        .google-logo { font-size: 24px; font-weight: bold; margin-bottom: 20px; color: #4285F4; }
        .google-logo span:nth-child(1) { color: #EA4335; }
        .google-logo span:nth-child(2) { color: #FBBC05; }
        .google-logo span:nth-child(3) { color: #34A853; }
        .search-result { margin-bottom: 20px; }
        .search-url { font-size: 12px; color: #202124; }
        .search-title { font-size: 18px; color: #1a0dab; text-decoration: none; cursor: pointer; margin: 2px 0; }
        .search-title:hover { text-decoration: underline; }
        .search-desc { font-size: 13px; color: #4d5156; user-select: text; }

/* Teclado */
        .keyboard-ui { padding: 20px; display: flex; flex-direction: column; gap: 15px; height: 100%; background: #fff;}
        .type-prompt { font-size: 16px; color: #555; background: #f0f0f0; padding: 10px; border-radius: 6px; font-family: monospace; }
        .type-input { width: 100%; height: 60px; padding: 10px; font-size: 16px; border: 2px solid #673AB7; border-radius: 6px; outline: none; font-family: monospace; }
        .fake-keyboard { display: flex; flex-direction: column; gap: 5px; align-items: center; margin-top: auto; opacity: 0.7;}
        .key-row { display: flex; gap: 5px; }
        .key { padding: 8px 12px; background: #e0e0e0; border-radius: 4px; font-size: 12px; font-weight: bold; border-bottom: 2px solid #bdbdbd;}

/* Resto do Site CSS */
        .gallery-section { padding: 60px 0; background: var(--light); }
        .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; }
        .gallery-item { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--shadow); }
        .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease, filter 0.3s;; }
        .gallery-item:hover img { transform: scale(1.1); }

.enroll-section { padding: 60px 0; background: white; }
        .online-box { background: linear-gradient(to right, var(--blue), var(--blue-dark)); color: white; padding: 30px; border-radius: 16px; margin-bottom: 50px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; box-shadow: var(--shadow); }
        .online-content h3 { margin: 0; font-size: 1.5rem; }
        
        .address-box { background: #fff7ed; border: 1px solid var(--orange); color: var(--blue-dark); padding: 20px; border-radius: 12px; text-align: center; margin: 0 auto 40px auto; max-width: 800px; display: flex; align-items: center; justify-content: center; gap: 15px; flex-wrap: wrap; }
        .address-box i { font-size: 1.5rem; color: var(--orange); }
        .address-text strong { display: block; font-size: 1.1rem; }

.vagas-header { text-align: center; margin-bottom: 30px; }
        .urgent-alert { color: #ef4444; font-weight: 800; text-transform: uppercase; font-size: 0.9rem; margin-top: 5px; display: block; }
        .grid-vagas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
        
        .vaga-card { background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; position: relative; transition: all 0.3s; cursor: pointer; }
        .vaga-card:hover { border-color: var(--orange); box-shadow: 0 10px 20px rgba(249, 115, 22, 0.15); transform: translateY(-2px); }
        .vaga-card.full { opacity: 0.6; cursor: not-allowed; background: #f1f5f9; }
        .vaga-title { font-weight: 700; color: var(--blue); font-size: 1.1rem; margin-bottom: 5px; }
        .vaga-status { font-size: 0.85rem; color: var(--gray); margin-bottom: 15px; display: flex; justify-content: space-between; }
        
        .progress-track { height: 8px; background: #e2e8f0; border-radius: 4px; overflow: hidden; }
        .progress-fill { height: 100%; background: var(--orange); border-radius: 4px; transition: width 1s ease-in-out; }

#loader { display: flex; justify-content: center; padding: 40px; color: var(--blue); font-weight: 600; gap: 10px; align-items: center; }
        .spinner { width: 20px; height: 20px; border: 3px solid var(--blue); border-top-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; }

.floating-wa { position: fixed; bottom: 20px; left: 20px; background: var(--whatsapp); color: white; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; box-shadow: 0 4px 10px rgba(0,0,0,0.3); z-index: 1000; transition: transform 0.3s; text-decoration: none; }
        .floating-wa:hover { transform: scale(1.1); }
        .wa-tooltip { position: absolute; left: 70px; background: white; color: #333; padding: 5px 10px; border-radius: 5px; font-size: 0.8rem; font-weight: bold; box-shadow: 0 2px 5px rgba(0,0,0,0.1); white-space: nowrap; display: none; }
        .floating-wa:hover .wa-tooltip { display: block; }

.price-sticky { background: var(--blue-dark); color: white; padding: 40px 20px; text-align: center; border-top: 5px solid var(--orange); }
        .price-tag { background: rgba(255,255,255,0.1); display: inline-block; padding: 10px 20px; border-radius: 8px; margin-bottom: 20px; }
        .old-price { text-decoration: line-through; color: #94a3b8; font-size: 1.1rem; margin-right: 10px; }
        .cta-price-text { font-size: 1.8rem; font-weight: 800; color: white; }
        
        .btn-main { background: var(--orange); color: white; text-decoration: none; padding: 16px 40px; border-radius: 50px; font-weight: 700; font-size: 1.1rem; display: inline-block; transition: background 0.3s; border: none; cursor: pointer; box-shadow: 0 4px 14px 0 rgba(249, 115, 22, 0.39); }
        .btn-main:hover { background: var(--orange-hover); transform: translateY(-2px); }
        .btn-outline { background: white; color: var(--blue); padding: 12px 30px; border-radius: 50px; text-decoration: none; font-weight: 700; display: inline-block; transition: 0.3s; }
        .btn-outline:hover { background: #f1f5f9; }

@media (max-width: 768px) {
            .hero-content { grid-template-columns: 1fr; text-align: center; }
            .hero-list { display: inline-block; text-align: left; }
            .hero h1 { font-size: 2rem; }
            .online-box { text-align: center; justify-content: center; }
        }

.category-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(37, 78, 140, 0.9) 0%, rgba(37, 78, 140, 0.2) 50%, transparent 100%); transition: all 0.3s ease; }
        .category-card:hover::before { background: linear-gradient(to top, rgba(243, 112, 33, 0.95) 0%, rgba(243, 112, 33, 0.4) 50%, transparent 100%); }

.whatsapp-float { animation: pulse-ws 2s infinite; }
        @keyframes pulse-ws { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } }

</style>
</head>
<body class="bg-gray-50 text-gray-800 overflow-x-hidden antialiased flex flex-col min-h-screen">

<div class="bg-primary-dark text-blue-100 text-xs py-2 px-4 border-b border-primary-dark/80">
        <div class="max-w-7xl mx-auto flex flex-col sm:flex-row justify-between items-center text-center sm:text-left gap-2 sm:gap-0">
            <div>
                <i href="https://g.page/inovasaofrancisco" class="fa-solid fa-location-dot mr-1"></i> <a href="https://g.page/inovasaofrancisco" class="hover:text-white transition ml-1">Rua Marcílio Dias 607 Centro (Mapa) |</a>
                <a href="https://www.inovaeducacional.com.br/p/area-do-aluno.html" class="hover:text-white transition ml-1 font-semibold">Login Alunos</a> | 
                <a href="https://www.inovaeducacional.com.br/p/area-administrativa.html" class="hover:text-white transition ml-1">Portal Colaborador</a>
            </div>
            <div class="flex space-x-4">
                <a href="https://pt-br.facebook.com/inovasaofranciscodosul/" class="hover:text-white transition"><i class="fa-brands fa-facebook-f"></i></a>
                <a href="https://wa.me/5547991140592" class="hover:text-white transition"><i class="fa-brands fa-whatsapp"></i></a>
                <a href="https://www.instagram.com/inovasaofranciscodosul/" class="hover:text-white transition"><i class="fa-brands fa-instagram"></i></a>
                <a href="https://x.com/Inova_Cursos_" class="hover:text-white transition"><i class="fa-brands fa-twitter"></i></a>
            </div>
        </div>
    </div>

<header class="bg-white shadow-sm sticky top-0 z-40 backdrop-blur-md bg-white/95">
        <div class="max-w-7xl mx-auto px-4 py-3 flex justify-between items-center">
            <a href="https://www.inovaeducacional.com.br" class="flex-shrink-0">
                <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB35ieBnv0eUVY8bF3MCwVIsC2takx9nddWuY_UWCT1u_OE3F-vbVi6PSWFlt-R_1Ul_-EbxWJreusoEbeCMTrs3c9Vb0SM9OGCAKbc2Vkc_p4acMkErEihBTuVonNAVZIH2nc4KqIHVoOK7WBdbsKTRPaNqNzH4ZDwRRcO1yy7u-5hAf7Os5JqiaNqm4S/s1600/LOGOTIPO%20INOVA%20VETORIZADO%20COREL.png" alt="Inova Cursos" class="h-10 md:h-12 object-contain">
            </a>
            
            <nav class="hidden lg:flex space-x-8 font-medium text-gray-700 items-center">
                <a href="https://www.inovaeducacional.com.br/" class="text-primary border-b-2 border-primary pb-1">Início</a>
                <a href="https://www.inovaeducacional.com.br/p/nossos-cursos.html" class="hover:text-secondary transition">Nossos Cursos</a>
                <a href="https://www.inovaeducacional.com.br/p/quem-somos_26.html" class="hover:text-secondary transition">Sobre</a>
                <a href="https://www.inovaeducacional.com.br/p/area-do-aluno.html" class="hover:text-secondary transition font-semibold text-primary"><i class="fa-solid fa-user mr-1"></i> Área Do Aluno</a>
            </nav>

<div id="mobile-menu" class="fixed inset-0 bg-black/50 z-[1200] transition-opacity duration-300 opacity-0 pointer-events-none lg:hidden">
        <div id="mobile-menu-content" class="fixed top-0 right-0 w-4/5 max-w-sm h-full bg-white shadow-xl p-6 transform translate-x-full transition-transform duration-300 flex flex-col justify-between">
            <div>
                <div class="flex justify-between items-center mb-8">
                    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB35ieBnv0eUVY8bF3MCwVIsC2takx9nddWuY_UWCT1u_OE3F-vbVi6PSWFlt-R_1Ul_-EbxWJreusoEbeCMTrs3c9Vb0SM9OGCAKbc2Vkc_p4acMkErEihBTuVonNAVZIH2nc4KqIHVoOK7WBdbsKTRPaNqNzH4ZDwRRcO1yy7u-5hAf7Os5JqiaNqm4S/s1600/LOGOTIPO%20INOVA%20VETORIZADO%20COREL.png" alt="Inova Cursos" class="h-8 object-contain">
                    <button id="btn-close-menu" class="text-2xl text-gray-500 hover:text-primary p-2">
                        <i class="fa-solid fa-xmark"></i>
                    </button>
                </div>
                <nav class="flex flex-col space-y-4 font-medium text-gray-700 text-lg">
                    <a href="https://www.inovaeducacional.com.br/" class="text-primary border-l-4 border-primary pl-3 py-1 bg-blue-50/50">Início</a>
                    <a href="https://www.inovaeducacional.com.br/p/nossos-cursos.html" class="hover:text-secondary hover:border-l-4 hover:border-secondary pl-3 py-1 transition">Nossos Cursos</a>
                    <a href="https://www.inovaeducacional.com.br/p/quem-somos_26.html" class="hover:text-secondary hover:border-l-4 hover:border-secondary pl-3 py-1 transition">Sobre</a>
                    <a href="https://www.inovaeducacional.com.br/p/area-do-aluno.html" class="hover:text-secondary hover:border-l-4 hover:border-secondary pl-3 py-1 transition font-semibold text-primary"><i class="fa-solid fa-user mr-1"></i> Área Do Aluno</a>
                </nav>
            </div>
            <div class="border-t border-gray-100 pt-6">
                <div class="flex justify-center space-x-6 text-xl text-gray-500">
                    <a href="https://pt-br.facebook.com/inovasaofranciscodosul/" class="hover:text-primary transition"><i class="fa-brands fa-facebook-f"></i></a>
                    <a href="https://wa.me/5547991140592" class="hover:text-primary transition"><i class="fa-brands fa-whatsapp"></i></a>
                    <a href="https://www.instagram.com/inovasaofranciscodosul/" class="hover:text-primary transition"><i class="fa-brands fa-instagram"></i></a>
                </div>
            </div>
        </div>
    </div>

<div class="scarcity-banner">
        <i class="fas fa-exclamation-triangle"></i> PREVISÃO DE INÍCIO: PRÓXIMA SEMANA! POUCAS VAGAS RESTANTES.
    </div>

<header class="hero">
        <div class="container-custom hero-content">
            <div class="hero-text">
                <span class="badge-carga"><i class="far fa-clock"></i> Carga Horária: 96 Horas</span>
                <h1>Curso Completo de<br><span style="color: var(--orange);">Informática</span></h1>
                <p>Domine o Windows, Word, Excel, PowerPoint e muito mais. Garanta a sua vaga na turma da próxima semana!</p>
                
                <ul class="hero-list">
                    <li><i class="fas fa-check-circle"></i> Certificado Reconhecido</li>
                    <li><i class="fas fa-check-circle"></i> Material Didático Incluído</li>
                    <li><i class="fas fa-check-circle"></i> Aulas 100% Práticas</li>
                </ul>

<a href="#inscricao" class="btn-main btn-pulse">Quero a Minha Vaga Agora</a>
            </div>
            
            <div class="hero-media">
                <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwXskqgn2Qby8cRgt8YdNN6qo2TlhgDzwSTDNJFQRBZaFcxycWy9j7HYZu47Lh3Wrs4ILwMRr-ph2GyyMm_xE1YNUkHg61kMSPZ7-7enMf9qQx5GkfALiriX1PZutIphSKM5r23nkOxf5kaR3Wa8NUcz1LsCRzragH2r4N7V5HII9dh33NxpqW7UexFY4/s16000-rw/curso-de-informatica.jpg" alt="Alunos Inova Educacional" class="main-hero-img">
                
                <div class="video-wrapper">
                    <iframe src="https://www.youtube.com/embed/2T2gN513wNE?si=qq7UIXyXJ37N9iiu" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </header>

<section class="modules-section">
        <div class="container-custom">
            <h2 class="section-title">O que vai aprender?</h2>
            <div class="modules-grid">
                <div class="module-card">
                    <i class="fab fa-windows module-icon"></i>
                    <h3>Windows</h3>
                    <p>Domine o sistema operativo mais usado no mundo. Organização de ficheiros e configurações.</p>
                </div>
                <div class="module-card">
                    <i class="fas fa-file-word module-icon"></i>
                    <h3>Microsoft Word</h3>
                    <p>Criação de documentos profissionais, formatação, currículos e contratos.</p>
                </div>
                <div class="module-card">
                    <i class="fas fa-file-excel module-icon"></i>
                    <h3>Microsoft Excel</h3>
                    <p>Do básico ao avançado. Folhas de cálculo, fórmulas, funções e gráficos.</p>
                </div>
                <div class="module-card">
                    <i class="fas fa-file-powerpoint module-icon"></i>
                    <h3>PowerPoint</h3>
                    <p>Crie apresentações de impacto para reuniões, trabalhos escolares e palestras.</p>
                </div>
                <div class="module-card">
                    <i class="fas fa-globe module-icon"></i>
                    <h3>Internet & Segurança</h3>
                    <p>Navegação eficiente, nuvem (Google Drive/OneDrive) e segurança de dados.</p>
                </div>
                <div class="module-card">
                    <i class="fas fa-keyboard module-icon"></i>
                    <h3>Digitação Ágil</h3>
                    <p>Técnicas para digitar com velocidade e precisão profissional.</p>
                </div>
            </div>

<div style="margin-top: 80px;" class="text-center">
                <div class="inline-block bg-orange-100 text-orange-600 px-4 py-1 rounded-full text-sm font-bold mb-4 uppercase tracking-wider">
                    Novidade Exclusiva
                </div>
                <h3 class="section-title" style="font-size: 2.2rem; margin-bottom: 15px;">Aqui você aprende na Prática!</h3>
                <p class="text-gray" style="margin-bottom: 40px; font-size: 1.1rem; max-width: 700px; margin-inline: auto;">
                    Nosso curso é <strong>100% prático</strong>. Utilize nosso simulador interativo abaixo para navegar pelos tópicos de estudo: clique nos aplicativos, abra o Menu Iniciar e arraste as janelas para explorar!
                </p>

<audio id="audio-hover" src="https://cdn.pixabay.com/download/audio/2025/09/05/audio_2b677bbcc4.mp3" preload="auto"></audio>
                <audio id="audio-click" src="https://cdn.pixabay.com/download/audio/2024/12/02/audio_66c94b953d.mp3" preload="auto"></audio>
                <audio id="audio-open" src="https://cdn.pixabay.com/download/audio/2025/09/09/audio_3023b9bde2.mp3" preload="auto"></audio>
                <audio id="audio-error" src="https://cdn.pixabay.com/download/audio/2026/04/29/audio_df44b82553.mp3" preload="auto"></audio>
                
                <div id="simulator-container">
                    <div id="monitor-wrapper">
                        <div id="monitor">
                            <div id="screen">
                                <div id="desktop">
                                    
                                </div>
                
                                <div id="windows-container"></div>
                
                                <div id="start-menu">
                                    <h3 style="margin-bottom: 10px; margin-top: 0; font-size: 18px; color: #1a1a1a; text-align: left;">Inova Cursos - Apps</h3>
                                    <div class="start-menu-grid" id="start-menu-grid">
                                        
                                    </div>
                                </div>
                
                                <div id="taskbar">
                                    <div class="taskbar-btn interactive-element" id="btn-start" title="Iniciar">
                                        <svg viewBox="0 0 24 24" fill="#0078D7" width="22" height="22">
                                            <path d="M22 2L11.2 3.6V11.5H22V2ZM10.2 3.8L2 5V11.5H10.2V3.8ZM2 12.5V19L10.2 20.2V12.5H2ZM11.2 12.5V20.4L22 22V12.5H11.2Z" />
                                        </svg>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="monitor-stand-neck"></div>
                        <div class="monitor-stand-base"></div>
                    </div>
                </div>
            </div>

</div>
    </section>

<section class="gallery-section">
        <div class="container-custom">
            <h2 class="section-title" style="font-size: 1.5rem; margin-bottom: 20px;">Nossos alunos</h2>
            <div class="gallery-grid">
                <div class="gallery-item"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFfaVymIiWwdraoW8Y_nvfVe3R5luZJEXeG5o8FoQJLLRs0AemAuWHNc2vhD-4N-JZf236nqFJDHAgJNUzPAQjyWZfLa7Xh079F4De44jgrAjMlNwg3vYhIlHfNgLHsPpWPQKSZq6Eb8UVRZ7G0-2x5NTS-ilxEso2YsSrSkBi8JXZhhC0-IPQnyL69_9Y/s320/358562506_693324109472096_2515242847646294540_n.jpg" alt="Ana"></div>
                <div class="gallery-item"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOLUS8VWYc9i_RXWz6aOdvCXD_tvgxdCWenL16qrtc0QOHFtbGsjpOsPUiPewcKz8CVnhApcJH5ps0NY0ywBsHFvfrYSFUgJLadl53KXTgDS9o8JLmrMIkimH0RPFw52NG3CwOufKaKyXHpTCB8iFcMYLR0Y7t-pYK-9pZF9_o0OstoMJyeAn0vTaiMRoV/s320/358608818_693324179472089_1556089524861689363_n.jpg" alt="Eduarda"></div>
                <div class="gallery-item"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVzMrU-9rjPEqF54djxDTNR68hPE_XndSRhAT7t4bKoEtdohcX-ISkCvB9PE74EqpQSuJETMrOS3sNaj-pXPG88KrMicMdtki3PMhm_ah9ApUm_JZ1RMxYME_8o9iPyx-LrcMQWumn1VelaikdQ9b8Z6KjYLPavjVgBdeGlOmiWFzez54B2jOy32WkvB_3/s320/357730696_693324276138746_3163651717739669992_n.jpg" alt="Maria"></div>
                <div class="gallery-item"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimPtdTxMV09AaZyI8izAAi6LQaL8HtMjsuLXW_cFdh928lcG43OtiRxGMmsCozeVY0KIprIY2nwLZuuYeDhIbInzoCXlx_mDXgoevmYxhF-FjxY6D0W5KPL-7jN3x9XTrLdHFGfbCUDnOtWwaZWA7quxNCjszE2XlOgZRPuTCxbbeRGqZPBw5Ve_mTy2Kz/s16000/639026264520940942.jpeg" alt="Larissa"></div>
            </div>
        </div>
    </section>

<section id="inscricao" class="enroll-section">
        <div class="container-custom">
            
            <div class="online-box">
                <div class="online-content">
                    <h3><i class="fas fa-laptop-house"></i> Prefere estudar em casa?</h3>
                    <p>Acesse à plataforma (via computador, celular, tablet, etc.) 100% Online (em qualquer dia e horário) e comece agora mesmo.</p>
                </div>
                <a href="https://www.inovaeducacional.com.br/p/inscricao-rapida.html#informatica-completa" target="_blank" class="btn-outline">Matrícula Online</a>
            </div>

<div class="vagas-header">
                <h2 class="section-title" style="margin-bottom: 5px;">Turmas para estudo Presencial</h2>
                <span class="urgent-alert"><i class="fas fa-fire"></i> Início Previsto: Próxima Semana!</span>
                <p class="text-gray" style="margin-top: 10px;">Selecione um horário abaixo para garantir a sua vaga.</p>
            </div>

<div class="address-box">
                <i class="fas fa-map-marker-alt"></i>
                <div class="address-text">
                    <strong>Unidade São Francisco do Sul</strong>
                    Rua Marcílio Dias 607, Centro (Em frente à Ortobom)
                </div>
                <a href="https://www.google.com/maps/place/Inova+Educa%C3%A7%C3%A3o+Profissional+-+S%C3%A3o+Francisco+do+Sul+-+Escola+de+Cursos+Profissionalizantes+-+Cursos+em+S%C3%A3o+Francisco+do+Sul/@-26.2472591,-48.6364326,17z/data=!3m1!4b1!4m6!3m5!1s0x94d94fc9088ac7ef:0xc523e726aca92bfd!8m2!3d-26.2472591!4d-48.6364326!16s%2Fg%2F11fsx5sbbx?entry=ttu&g_ep=EgoyMDI2MDEyOC4wIKXMDSoASAFQAw%3D%3D" target="_blank" class="btn-outline" style="background: var(--orange); color: white; padding: 8px 20px; font-size: 0.9rem;">Ver no Mapa</a>
            </div>

<div id="loader">
                <div class="spinner"></div> A verificar disponibilidade...
            </div>

</div>
    </section>

<section class="price-sticky">
        <div class="container-custom">
            <div class="price-tag">
                <span class="old-price">De R$ 239,90/mês</span>
                <span class="cta-price-text">CONSULTAR DESCONTO</span>
            </div>
            <br>
            <a href="https://www.inovaeducacional.com.br/p/inscricao-rapida.html#informatica-completa" class="btn-main btn-pulse">
                GARANTIR MINHA VAGA AGORA <i class="fas fa-arrow-right" style="margin-left: 10px;"></i>
            </a>
        </div>
    </section>

<a href="https://api.whatsapp.com/send?phone=5547991140592&text=Ol%C3%A1%2C%20tenho%20uma%20d%C3%BAvida%20sobre%20o%20curso%20de%20Inform%C3%A1tica!" class="floating-wa" target="_blank" title="Falar no WhatsApp">
        <i class="fab fa-whatsapp"></i>
        <div class="wa-tooltip">Dúvidas? Chame aqui!</div>
    </a>

<footer class="bg-gray-900 pt-20 pb-10 border-t-4 border-secondary text-gray-300">
        <div class="max-w-7xl mx-auto px-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-16">
            
            <div class="space-y-6">
                <div class="bg-white inline-block p-3 rounded-xl">
                    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB35ieBnv0eUVY8bF3MCwVIsC2takx9nddWuY_UWCT1u_OE3F-vbVi6PSWFlt-R_1Ul_-EbxWJreusoEbeCMTrs3c9Vb0SM9OGCAKbc2Vkc_p4acMkErEihBTuVonNAVZIH2nc4KqIHVoOK7WBdbsKTRPaNqNzH4ZDwRRcO1yy7u-5hAf7Os5JqiaNqm4S/s1600/LOGOTIPO%20INOVA%20VETORIZADO%20COREL.png" alt="Inova Cursos" class="h-8 object-contain">
                </div>
                <p class="text-sm leading-relaxed text-gray-400">
                    Transformando vidas através da educação desde 2014. Cursos profissionalizantes, graduação e técnicos com foco no mercado de trabalho.
                </p>
                <div class="text-xs text-gray-500 font-medium">AWC TREINAMENTOS E IDIOMAS LTDA</div>
            </div>

<div>
                <h4 class="font-bold text-white text-lg mb-6 flex items-center gap-2"><i class="fa-solid fa-link text-secondary"></i> Links Úteis</h4>
                <ul class="space-y-3">
                    <li><a href="https://www.inovaeducacional.com.br/" class="hover:text-secondary transition flex items-center gap-2"><i class="fa-solid fa-angle-right text-xs"></i> Página Inicial</a></li>
                    <li><a href="https://www.inovaeducacional.com.br/p/quem-somos_26.html" class="hover:text-secondary transition flex items-center gap-2"><i class="fa-solid fa-angle-right text-xs"></i> Sobre Nós</a></li>
                    <li><a href="https://www.inovaeducacional.com.br/p/area-do-aluno.html" class="hover:text-secondary transition flex items-center gap-2"><i class="fa-solid fa-angle-right text-xs"></i> Área do Aluno</a></li>
                    <li><a href="https://www.inovaeducacional.com.br/p/nossos-cursos.html" class="hover:text-secondary transition flex items-center gap-2"><i class="fa-solid fa-angle-right text-xs"></i> Lista de Cursos</a></li>
                </ul>
            </div>

<div>
                <h4 class="font-bold text-white text-lg mb-6 flex items-center gap-2"><i class="fa-solid fa-headset text-secondary"></i> Contato</h4>
                <ul class="space-y-4">
                    <li class="flex items-start gap-3">
                        <i class="fa-solid fa-location-dot mt-1 text-gray-500"></i>
                        <span class="text-sm">Rua Marcílio Dias, 607 - Centro<br>São Francisco do Sul - SC</span>
                    </li>
                    <li class="flex items-center gap-3">
                        <i class="fa-brands fa-whatsapp text-green-500"></i>
                        <a href="https://wa.me/5547991140592" class="text-sm hover:text-white transition">(47) 99114-0592</a>
                    </li>
                    <li class="flex items-center gap-3">
                        <i class="fa-regular fa-envelope text-gray-500"></i>
                        <a href="mailto:atendimento@grupoinova.net.br" class="text-sm hover:text-white transition">atendimento@grupoinova.net.br</a>
                    </li>
                </ul>
            </div>

</div>

<div class="max-w-7xl mx-auto px-4 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center text-xs text-gray-500">
            <p>© 2026 Inova Cursos. Todos os direitos reservados.</p>
            <p class="mt-2 md:mt-0">AWC TREINAMENTOS @ GRUPO INOVA CURSOS.</p>
        </div>
    </footer>

<script>
        // ==========================================
        // LÓGICA ORIGINAL DO CURSO (VAGAS E MENU)
        // ==========================================
        const SHEET_ID = '1oNRkdN8vJ15hzTJErJxzCLIkfdrdbkpdQ3HDhR3Cllo';
        const RANGE = 'B1:Z13'; 
        const WHATSAPP_NUMBER = '5547991140592';
        const BASE_URL = `https://docs.google.com/spreadsheets/d/${SHEET_ID}/gviz/tq?tqx=out:json&range=${RANGE}`;

async function fetchAvailability() {
            const loader = document.getElementById('loader');
            try {
                const response = await fetch(BASE_URL);
                const text = await response.text();
                const jsonData = JSON.parse(text.substring(text.indexOf('{'), text.lastIndexOf('}') + 1));
                loader.style.display = 'none'; 
                processData(jsonData.table);
            } catch (error) {
                console.error("Erro ao carregar vagas:", error);
                loader.innerHTML = '<span style="color:red">Erro ao carregar horários. Tente recarregar a página.</span>';
            }
        }

function processData(table) {
            const rows = table.rows;
            const headerRow = rows[0].c;

headerRow.forEach((titleCell, colIndex) => {
                if (!titleCell || !titleCell.v) return;

let occupied = 0;
                for (let i = 1; i < rows.length; i++) {
                    if (rows[i].c[colIndex] && rows[i].c[colIndex].v) {
                        occupied++;
                    }
                }

const totalSpots = 12;
                const free = Math.max(0, totalSpots - occupied);
                const percent = (occupied / totalSpots) * 100;
                
                renderCard(titleCell.v, free, percent, totalSpots);
            });
        }

function renderCard(title, free, percent, totalSpots) {
            const container = document.getElementById('gridContainer');
            const isFull = free === 0;
            const isNearFull = free <= 3 && free > 0;
            
            const card = document.createElement('div');
            card.className = `vaga-card ${isFull ? 'full' : ''}`;
            
            let barColor = 'var(--orange)';
            let statusText = `Restam <strong>${free}</strong> vagas`;
            let textColor = 'var(--blue)';

if (isFull) {
                barColor = '#ef4444'; 
                statusText = '<span style="color:#ef4444; font-weight:bold;">TURMA LOTADA</span>';
                textColor = '#94a3b8';
            } else if (isNearFull) {
                barColor = '#ef4444'; 
                statusText = `Últimas <strong>${free}</strong> vagas!`;
            }

card.innerHTML = `
                <div class="vaga-title" style="color: ${textColor}">
                    <i class="far fa-calendar-alt"></i> ${title}
                </div>
                <div class="vaga-status">
                    <span>${statusText}</span>
                    <span style="font-size:0.8rem">${Math.round(percent)}% ocupado</span>
                </div>
                <div class="progress-track">
                    <div class="progress-fill" style="width: ${percent}%; background: ${barColor}"></div>
                </div>
                ${!isFull ? `
                    <div style="margin-top:15px; text-align:right; font-size:0.85rem; font-weight:600; color:var(--orange);">
                        Clique para inscrever <i class="fas fa-chevron-right"></i>
                    </div>
                ` : ''}
            `;

if (!isFull) {
                const msg = encodeURIComponent(`Olá Inova! Vi no site que tem vaga para Informática no horário: *${title}*. Gostaria de garantir a minha vaga para o início na próxima semana.`);
                card.onclick = () => window.open(`https://api.whatsapp.com/send?phone=${WHATSAPP_NUMBER}&text=${msg}`, '_blank');
            }

container.appendChild(card);
        }

// ==========================================
        // LÓGICA DO SIMULADOR INTERATIVO (PCINFOINTERA)
        // ==========================================
        const appsData = {
            word: {
                id: 'word', title: 'Word',
                desc: "Domine a criação de documentos profissionais! Essencial para redigir currículos de destaque.",
                color: '#2B579A',
                svg: `<svg viewBox="0 0 24 24" fill="#2B579A" xmlns="http://www.w3.org/2000/svg"><path d="M21 4H3C2.4 4 2 4.4 2 5V19C2 19.6 2.4 20 3 20H21C21.6 20 22 19.6 22 19V5C22 4.4 21.6 4 21 4ZM15 15H9V13H15V15ZM17 11H7V9H17V11Z"/></svg>`
            },
            excel: {
                id: 'excel', title: 'Excel',
                desc: "O segredo dos profissionais bem pagos! Aprenda a criar planilhas inteligentes e automatizar cálculos.",
                color: '#217346',
                svg: `<svg viewBox="0 0 24 24" fill="#217346" xmlns="http://www.w3.org/2000/svg"><path d="M21 4H3C2.4 4 2 4.4 2 5V19C2 19.6 2.4 20 3 20H21C21.6 20 22 19.6 22 19V5C22 4.4 21.6 4 21 4ZM10 16H7L9 12L7 8H10L11 10.5L12 8H15L13 12L15 16H12L11 13.5L10 16Z"/></svg>`
            },
            ppt: {
                id: 'ppt', title: 'PowerPoint',
                desc: "Surpreenda seu público com apresentações magnéticas! Transforme suas ideias em slides visuais de alto impacto.",
                color: '#B7472A',
                svg: `<svg viewBox="0 0 24 24" fill="#B7472A" xmlns="http://www.w3.org/2000/svg"><path d="M21 4H3C2.4 4 2 4.4 2 5V19C2 19.6 2.4 20 3 20H21C21.6 20 22 19.6 22 19V5C22 4.4 21.6 4 21 4ZM12 15C9.8 15 8 13.2 8 11C8 8.8 9.8 7 12 7C14.2 7 16 8.8 16 11C16 13.2 14.2 15 12 15Z"/></svg>`
            },
            explorer: {
                id: 'explorer', title: 'Arquivos',
                desc: "Organização é produtividade! Aprenda a estruturar pastas e gerenciar seus arquivos digitais com segurança.",
                color: '#FFCA28',
                svg: `<svg viewBox="0 0 24 24" fill="#FFCA28" xmlns="http://www.w3.org/2000/svg"><path d="M20 6H12L10 4H4C2.9 4 2.01 4.9 2.01 6L2 18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V8C22 6.9 21.1 6 20 6ZM20 18H4V8H20V18Z"/></svg>`
            },
            internet: {
                id: 'internet', title: 'Internet',
                desc: "Navegue com inteligência! Descubra como pesquisar fontes confiáveis e conectar-se com o mundo online.",
                color: '#0078D7',
                svg: `<svg viewBox="0 0 24 24" fill="#0078D7" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM11 19.93C7.06 19.43 4 16.05 4 12C4 11.68 4.03 11.36 4.08 11.05L7.29 14.26C7.68 14.65 8.32 14.65 8.71 14.26C9.1 13.87 9.1 13.24 8.71 12.85L5.85 10H8C8.55 10 9 9.55 9 9V7C9 6.45 9.45 6 10 6H12C12.55 6 13 5.55 13 5V4.21C16.82 5.09 19.78 8.16 20.07 12H18C17.45 12 17 12.45 17 13V15C17 15.55 16.55 16 16 16H15C14.45 16 14 16.45 14 17V19.06C13.06 19.68 12.06 19.93 11 19.93Z"/></svg>`
            },
            keyboard: {
                id: 'keyboard', title: 'Digitação',
                desc: "Ganhe velocidade e agilidade! A técnica correta acelera tarefas e elimina o cansaço.",
                color: '#673AB7',
                svg: `<svg viewBox="0 0 24 24" fill="#673AB7" xmlns="http://www.w3.org/2000/svg"><path d="M20 5H4C2.9 5 2.01 5.9 2.01 7L2 17C2 18.1 2.9 19 4 19H20C21.1 19 22 18.1 22 17V7C22 5.9 21.1 5 20 5ZM11 8H13V10H11V8ZM11 11H13V13H11V11ZM8 8H10V10H8V8ZM8 11H10V13H8V11ZM7 13H5V11H7V13ZM7 10H5V8H7V10ZM16 17H8V15H16V17ZM16 13H14V11H16V13ZM16 10H14V8H16V10ZM19 13H17V11H19V13ZM19 10H17V8H19V10Z"/></svg>`
            }
        };

let highestZIndex = 100;
        let simulatorScale = 1; // Variável para controlar a responsividade do toque e arraste

// Responsividade do Simulador (Scaling Perfeito)
        function resizeSimulator() {
            const container = document.getElementById('simulator-container');
            const wrapper = document.getElementById('monitor-wrapper');
            if (!container || !wrapper) return;
            
            const containerWidth = container.clientWidth;
            const targetWidth = 1040; // Monitor (1000) + um respiro
            
            if (containerWidth < targetWidth) {
                simulatorScale = containerWidth / targetWidth;
                wrapper.style.transform = `scale(${simulatorScale})`;
                container.style.height = `${720 * simulatorScale}px`; 
            } else {
                simulatorScale = 1;
                wrapper.style.transform = `scale(1)`;
                container.style.height = `720px`;
            }
        }

function initSystem() {
            const desktop = document.getElementById('desktop');
            const startMenuGrid = document.getElementById('start-menu-grid');
            const windowsContainer = document.getElementById('windows-container');

let initialTop = 20;
            let initialLeft = 20;

Object.values(appsData).forEach(app => {
                const icon = document.createElement('div');
                icon.className = 'desktop-icon interactive-element';
                icon.innerHTML = `${app.svg}<span>${app.title}</span>`;
                icon.style.top = `${initialTop}px`;
                icon.style.left = `${initialLeft}px`;
                
                icon.addEventListener('click', () => { if(!icon.hasAttribute('data-dragging')) openWindow(app.id); });
                icon.addEventListener('touchend', () => { if(!icon.hasAttribute('data-dragging')) openWindow(app.id); });

desktop.appendChild(icon);
                makeDraggable(icon, icon, desktop);

initialTop += 100;
                if (initialTop > 350) { initialTop = 20; initialLeft += 100; }

function makeDraggable(element, handle, boundary) {
            let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
            let isDragging = false;

handle.onmousedown = dragMouseDown;
            handle.ontouchstart = dragMouseDown;

function dragMouseDown(e) {
                if(e.target.classList.contains('window-btn') || e.target.tagName.toLowerCase() === 'input' || e.target.getAttribute('contenteditable') === 'true') return;
                
                // Evita rolagem da página ao arrastar janelas no celular
                if (e.type === 'touchstart' && (handle.classList.contains('window-header') || handle.classList.contains('desktop-icon'))) {
                    if (e.cancelable) e.preventDefault();
                }

if(element.classList.contains('app-window') && !element.classList.contains('maximized')) bringToFront(element);

e = e || window.event;
                if(e.type !== 'touchstart') e.preventDefault(); 
                e.stopPropagation(); 
                
                if (e.type === 'touchstart') { pos3 = e.touches[0].clientX; pos4 = e.touches[0].clientY; } 
                else { pos3 = e.clientX; pos4 = e.clientY; }

document.onmouseup = closeDragElement;
                document.onmousemove = elementDrag;
                document.ontouchend = closeDragElement;
                document.ontouchmove = elementDrag;
                isDragging = false;
                element.removeAttribute('data-dragging');
            }

function elementDrag(e) {
                e = e || window.event;
                isDragging = true;
                element.setAttribute('data-dragging', 'true');

let clientX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;
                let clientY = e.type === 'touchmove' ? e.touches[0].clientY : e.clientY;

// Divide pelo simulatorScale para arrastar perfeitamente em telas pequenas
                pos1 = (pos3 - clientX) / simulatorScale;
                pos2 = (pos4 - clientY) / simulatorScale;
                pos3 = clientX;
                pos4 = clientY;

let newTop = element.offsetTop - pos2;
                let newLeft = element.offsetLeft - pos1;

if (boundary) {
                    const minX = 0;
                    const minY = 0;
                    const maxX = boundary.offsetWidth - element.offsetWidth;
                    let maxY = element.classList.contains('desktop-icon') ? boundary.offsetHeight - element.offsetHeight : boundary.offsetHeight - 40; 
                    if (newLeft < minX || newLeft > maxX || newTop < minY || newTop > maxY) { if(Math.random() > 0.95) playSound('error'); }
                    newLeft = Math.max(minX, Math.min(newLeft, maxX));
                    newTop = Math.max(minY, Math.min(newTop, maxY));
                }
                element.style.top = newTop + "px";
                element.style.left = newLeft + "px";
            }
            function closeDragElement() {
                document.onmouseup = null; document.onmousemove = null; document.ontouchend = null; document.ontouchmove = null;
                setTimeout(() => { element.removeAttribute('data-dragging'); }, 50);
            }
        }

// ==========================================
        // INICIALIZAÇÃO GERAL
        // ==========================================
        window.onload = () => {
            fetchAvailability();
            
            // Script do Menu Mobile do Header
            const btnOpen = document.getElementById('btn-mobile-menu');
            const btnClose = document.getElementById('btn-close-menu');
            const menu = document.getElementById('mobile-menu');
            const menuContent = document.getElementById('mobile-menu-content');

if (btnOpen && btnClose && menu && menuContent) {
                btnOpen.addEventListener('click', () => { menu.classList.remove('opacity-0', 'pointer-events-none'); menuContent.classList.remove('translate-x-full'); });
                btnClose.addEventListener('click', () => { menu.classList.add('opacity-0', 'pointer-events-none'); menuContent.classList.add('translate-x-full'); });
            }

// Inicializa Simulador e ajusta o resize
            initSystem();
            resizeSimulator();
            window.addEventListener('resize', resizeSimulator);
        };
    </script>
</body>
</html>

Informática Curso Completo

0 Comentários

Contact Info

Contact List

Contact form

Informática Curso Completo

Talvez você goste destas postagens

0 Comentários

Contact Info

Contact List

Contact form