Quem Somos

<!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>Sobre a Inova Cursos - Educação Profissional</title>
    
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            DEFAULT: '#254e8c', // Azul da Inova
                            dark: '#1e3f70',
                            light: '#366bc2'
                        },
                        secondary: {
                            DEFAULT: '#f37021', // Laranja da Inova
                            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>

.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); }
        }

/* Utilidade para truncar texto em N linhas */
        .line-clamp-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;  
            overflow: hidden;
        }
        .line-clamp-3 {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;  
            overflow: hidden;
        }
        
        /* Spinner customizado para o botão de carregar cursos */
        .loader-spinner {
            border: 3px solid rgba(255,255,255,0.3);
            border-radius: 50%;
            border-top: 3px solid white;
            width: 20px;
            height: 20px;
            animation: spin 1s linear infinite;
        }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* =========================================
           NOVOS ESTILOS - ESTRUTURA (MAPA INTERATIVO)
           ========================================= */
        .hotspot {
            position: absolute;
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transform: none;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 4px solid #fff;
            box-shadow: 0 0 0 0 rgba(26, 115, 232, 0.7);
            z-index: 10;
        }
        .hotspot:hover {
            transform: scale(1.1);
            box-shadow: 0 0 0 8px rgba(26, 115, 232, 0.4);
        }
        .hotspot > svg { width: 60%; height: 60%; transform: none; }
        .hotspot.pulsing { animation: pin-pulse 2s infinite; }
        
        @keyframes pin-pulse {
            0% { box-shadow: 0 0 0 0 rgba(26, 115, 232, 0.7); }
            70% { box-shadow: 0 0 0 15px rgba(26, 115, 232, 0); }
            100% { box-shadow: 0 0 0 0 rgba(26, 115, 232, 0); }
        }

#progress-bar {
            height: 12px;
            background-color: #93c5fd;
            border-radius: 9999px;
            overflow: hidden;
            margin-top: 10px;
        }
        #progress-fill {
            background-color: #f97316;
            height: 100%;
            transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
        }

@media (max-width: 768px) {
            #detail-panel {
                position: fixed;
                top: 0; left: 0; width: 100vw; height: 100vh;
                z-index: 50; transform: translateX(100%);
                transition: transform 0.3s ease-out; box-shadow: none; 
            }
            #detail-panel.active { transform: translateX(0); }
        }

/* Swiper Botões Custom */
        .swiper-button-next::after, .swiper-button-prev::after { font-size: 1.2rem !important; font-weight: bold; }
    </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" target="_blank" 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="#" class="flex-shrink-0">
                <img src="https://blogger.googleusercontent.com/img/a/AVvXsEjEZ93jis5JPQM2pfRFoH7env7M65x00NbJmzU31UdFEJz4YlCVQi-iFbmtyCv9vaENb1k752XOxMDWe6V6QrlwxTjR2dOgVsqlkKBHiko_jQg1UjdVzwGxpexLNCOSuD-Re4FocQJDLPY5KoqWbK7FWAh7qlCJTAuAdaVxTseKtGSVr9V4kMOGIPvs8hZe=s1600" 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-50 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="Sobre a 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" target="_blank" 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="bg-white border-b border-gray-200 sticky top-[64px] z-30 hidden md:block">
        <div class="max-w-7xl mx-auto px-4 flex justify-center space-x-8 text-sm font-semibold">
            <a href="#quem-somos" class="py-3 text-gray-600 hover:text-primary border-b-2 border-transparent hover:border-primary transition">Quem Somos</a>
            <a href="#estrutura" class="py-3 text-gray-600 hover:text-primary border-b-2 border-transparent hover:border-primary transition">Nossa Estrutura</a>
            <a href="#faq" class="py-3 text-gray-600 hover:text-primary border-b-2 border-transparent hover:border-primary transition">Perguntas Frequentes</a>
            <a href="#validar-certificado" class="py-3 text-gray-600 hover:text-primary border-b-2 border-transparent hover:border-primary transition">Validar Certificado</a>
        </div>
    </div>

<main class="flex-grow">
        
        
        <section id="quem-somos" class="py-16 bg-white pt-24 -mt-8">
            <div class="max-w-7xl mx-auto px-4">
                
                
                <div class="text-center max-w-3xl mx-auto mb-16">
                    <h1 class="text-4xl font-extrabold text-primary mb-4">Sobre a Inova Cursos</h1>
                    <p class="text-gray-600 text-lg">Transformando vidas através da educação desde 2014.</p>
                    <div class="w-24 h-1 bg-secondary mx-auto mt-6 rounded-full"></div>
                </div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-20">
                    <div class="relative group">
                        <div class="absolute inset-0 bg-primary rounded-2xl transform translate-x-4 translate-y-4 transition-transform group-hover:translate-x-2 group-hover:translate-y-2"></div>
                        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEierWlG7qzYkIDxoI_TVwmlPEZhvNC0L7l_pI_aawOKM8F-KbUH6-86Z-_rlP5ccaBJw_ecpdBTCsR3iyBf4MuWYUMOGkFWlOp7ELpxcedltl4lu0TcXjevhrV2SBNFaKBNNVyf_mm4K_HFkZkyNNLWbqKbRV6f5VV1TIPrr5_8viPePFBbXPZPcYL3ePY/s16000-rw/638854393974469059.jpg" alt="Fachada Inova Cursos" class="relative z-10 w-full h-auto object-cover rounded-2xl shadow-xl">
                    </div>
                    <div>
                        <h2 class="text-3xl font-bold text-gray-800 mb-6">Nossa História</h2>
                        <p class="text-gray-600 mb-4 leading-relaxed text-lg">
                            Empresa no mercado desde 2014. Temos como missão criar condições para que nosso aluno se transforme através do conhecimento, assim tornando-se não só um profissional mas também um ser humano melhor.
                        </p>
                        <p class="text-gray-600 mb-6 leading-relaxed text-lg">
                            Somos uma escola de cursos profissionalizantes nas áreas administrativas, de informática e tecnologia, idiomas, gestão, logística e profissões. E com esses <strong class="text-secondary">10 Anos de Sucesso</strong>, estamos orgulhosos de alcançar a marca de mais de <strong class="text-primary">10000 alunos formados</strong> em nossas Unidades no estado de SC.
                        </p>
                        <div class="flex items-center gap-4 text-primary font-bold bg-blue-50 p-4 rounded-xl inline-flex">
                            <i class="fa-solid fa-graduation-cap text-3xl text-secondary"></i>
                            <div>
                                <span class="block text-2xl">+10000</span>
                                <span class="text-sm font-medium text-gray-600">Alunos Formados</span>
                            </div>
                        </div>
                    </div>
                </div>

<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-20">
                    
                    <div class="bg-gray-50 p-8 rounded-2xl border border-gray-100 shadow-sm hover:shadow-md transition">
                        <div class="w-14 h-14 bg-blue-100 text-primary rounded-full flex items-center justify-center text-2xl mb-6">
                            <i class="fa-solid fa-bullseye"></i>
                        </div>
                        <h3 class="text-xl font-bold text-gray-800 mb-3">Nossa Missão</h3>
                        <p class="text-gray-600 leading-relaxed text-sm">Gerar o desenvolvimento do ser humano através de sólidos conhecimentos e orientação prática da profissão, visando à formação de cidadãos críticos, autônomos, empreendedores e comprometidos.</p>
                    </div>
                    
                    <div class="bg-gray-50 p-8 rounded-2xl border border-gray-100 shadow-sm hover:shadow-md transition">
                        <div class="w-14 h-14 bg-orange-100 text-secondary rounded-full flex items-center justify-center text-2xl mb-6">
                            <i class="fa-solid fa-eye"></i>
                        </div>
                        <h3 class="text-xl font-bold text-gray-800 mb-3">Nossa Visão</h3>
                        <p class="text-gray-600 leading-relaxed text-sm">Ser referência no ensino profissionalizante, através de conteúdos personalizados e atualizados, e do ensino com os melhores recursos; formando profissionais de sucesso e reconhecida pelo compromisso com a transformação social.</p>
                    </div>
                    
                    <div class="bg-gray-50 p-8 rounded-2xl border border-gray-100 shadow-sm hover:shadow-md transition">
                        <div class="w-14 h-14 bg-blue-100 text-primary rounded-full flex items-center justify-center text-2xl mb-6">
                            <i class="fa-solid fa-heart"></i>
                        </div>
                        <h3 class="text-xl font-bold text-gray-800 mb-3">Nossos Valores</h3>
                        <ul class="text-gray-600 text-sm space-y-2">
                            <li><i class="fa-solid fa-check text-green-500 mr-2"></i>Formação de pessoas</li>
                            <li><i class="fa-solid fa-check text-green-500 mr-2"></i>Educação de qualidade e excelência</li>
                            <li><i class="fa-solid fa-check text-green-500 mr-2"></i>Credibilidade da marca INOVA</li>
                            <li><i class="fa-solid fa-check text-green-500 mr-2"></i>Inclusão social e Inovação</li>
                            <li><i class="fa-solid fa-check text-green-500 mr-2"></i>Ética e transparência</li>
                        </ul>
                    </div>
                </div>

<div>
                    <h3 class="text-2xl font-bold text-center text-gray-800 mb-8">Nossos Alunos - Galeria</h3>
                    <div class="swiper mySwiper w-full h-64 md:h-80 rounded-2xl overflow-hidden relative shadow-lg">
                        <div class="swiper-wrapper">
                            
                            <div class="swiper-slide"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn9ziD-zI7GJqCJeUY8NznUuYYZCq0ZLJDiVuWOZYT0s9ObvyK9NLlPUnid9R34HeUNAhn84y36G2MANPeaum41krPT7E1eNrQBPA2NagmLUHRiA-IvmpNe4DhMIPkLrQ1XOnpacAB7OvOHGMV6TSQs6Nnfnb72Et4uEH9sLmcm1Das50Jg_psd3dT-ic/s16000/1.png" class="w-full h-full object-cover"></div>
                          <div class="swiper-slide"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYObqgIvlWfwW800bIuIyCHacxiADZaS7IsYPv8X6ICnVKIhyIlDW70pwk2fLQi6RCoYn2N4ZKCELJ6Fibu8_8LiRUt24LGeP4MLm2PQtxOVmU5mskg9ofo0YSEG4noIdT1DuOaJ7LSDaucXTszsHQ50VEcxNnO-QzNaHTwCazjd3GarpBGRFVQhjCu2in/s1600/walace%20recebendo%20certificado%20inova%20cursos.png" class="w-full h-full object-cover"></div>
                            <div class="swiper-slide"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY8ZnPRIWrNQzz9_NFJIVyrcKCKAxdn5UcIqTrdwc7XyU65pb5wWsYkybJ1YL-u1C05qdhiOs4ET7IEu9m4rmx5CmGE07Sm_deuJJop250cF5E8i7ELXNztd_hqK8lFu8XlKzqwiw6hVZwsOj2RR49wB1rbUxfO27LLPqU7qIh9DyE2favfhlWXWO0sZE/s16000/2.png" class="w-full h-full object-cover"></div>
                            <div class="swiper-slide"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1jgW2mKc9VPJlPr9WAc2-CSglvzhi0kWzMc168HK-29MAbz3DdbK_44-L_QgBiAfRyCfJ9DpjFHWaECe5EWw4P-LLf8WVS6kJGYTV4iouFgooh_4qcSQaH4bEjfneIWzVRT1CDgtsb0_VOchqp6oL0wwOhUgw-Ga_Mh6918koGbO_qiEcIOjy3kybpMY/s16000/3.png" class="w-full h-full object-cover"></div>
                            <div class="swiper-slide"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7YK3HweOM6_Tlr6h9gGOdJgj9s0LrCdDKnVVi5dj_ZNcIV7r0wQ3_QX955z4x6964QAUSZXi8jLATIO202y_I-dqF5-QTE7oWeKVS8SVdp3s60QPrwKwRRES8AzEcT2QwLlG9TKyMtWdfPqp1ur-5F06Pqz9fKOZ3CS9sxvBI5KdgdqOdJv3LMIU_74Q/s16000/4.png" class="w-full h-full object-cover"></div>
                        </div>
                        <div class="swiper-button-next text-white drop-shadow-md"></div>
                        <div class="swiper-button-prev text-white drop-shadow-md"></div>
                    </div>
                </div>
                
            </div>
        </section>

<section id="estrutura" class="py-16 bg-gray-100 border-t border-gray-200 pt-24 -mt-8">
            <div class="max-w-7xl mx-auto px-4">
                <div class="text-center mb-12">
                    <h2 class="text-3xl font-extrabold text-primary mb-4">Conheça Nossa Estrutura</h2>
                    <p class="text-gray-600">Navegue pelo nosso mapa interativo e conheça nossos ambientes.</p>
                </div>

<div class="max-w-6xl mx-auto bg-white rounded-2xl shadow-xl overflow-hidden">
                    
                    
                    <div class="p-6 bg-primary text-white shadow-md relative z-10">
                        <h3 class="text-2xl md:text-3xl font-extrabold flex items-center">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-3 text-secondary" viewBox="0 0 24 24" fill="currentColor">
                                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17.93c-2.43-.51-4.45-2.28-5.36-4.66l4.66-4.66V13c0 2.21 1.79 4 4 4 0 .96-.34 1.84-.91 2.54-.78.96-1.92 1.55-3.09 1.55zm-1-15.93c1.94 0 3.65.86 4.84 2.19l-4.84 4.84V6c0-1.1-.9-2-2-2-.36 0-.69.11-1.01.27l-2.77-2.77C5.58 3.59 7.73 2 10 2z"/>
                            </svg>
                            Mapa de Exploração
                        </h3>
                        <p class="mt-2 text-blue-100 font-medium text-sm">Clique nos pontos pulsantes para desbloquear as áreas e informações!</p>
                        <div id="progress-container">
                            <div class="flex justify-between text-xs mt-3 text-blue-100 font-semibold">
                                <span>Progresso de Exploração:</span>
                                <span id="progress-text">0/4 Áreas (0%)</span>
                            </div>
                            <div id="progress-bar">
                                <div id="progress-fill" style="width: 0%;"></div>
                            </div>
                        </div>
                    </div>

<div class="flex flex-col md:flex-row">
                        
                        <div id="map-section" class="md:w-2/3 p-4 md:p-6 relative bg-gray-50 flex justify-center items-center">
                            <div id="map-container" class="relative w-full max-w-lg mx-auto" style="padding-bottom: 65%;">
                                <img id="map-image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL__ri1XK5aXLZwHQyPv64WH1oaPFR6QbezWNtl7ngaOenzxKVQd2M-tkJzhaqrSyHPqk69jlNdGp95fyaNKWKTA3GE8FPrNZhHdDrBEIG8Wbv8qvMl9eHvCwmYM2guwm7zD6RijCn2dkq-RWvc0h6ozHDK_gvMAjb44z-EYV_J0oyR55S4hIJbj8cx0ne/s16000/Untitled-2.png" 
                                    onerror="this.onerror=null; this.src='https://placehold.co/800x500/004c99/ffffff?text=ERRO+AO+CARREGAR+IMAGEM+DO+MAPA';" 
                                    alt="Planta Baixa da Estrutura" class="absolute inset-0 w-full h-full object-contain rounded-lg shadow-sm">
                                
                            </div>
                        </div>

<div id="detail-panel" class="md:w-1/3 p-6 bg-white border-l border-gray-100">
                            <button onclick="closeDetailPanel()" class="md:hidden absolute top-4 right-4 text-gray-700 hover:text-red-600 p-2 rounded-full bg-white shadow-md">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                                </svg>
                            </button>

<h4 id="detail-title" class="text-xl font-extrabold text-primary mb-4 border-b-2 pb-2 border-secondary">Selecione um Local</h4>
                            <img id="detail-image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEierWlG7qzYkIDxoI_TVwmlPEZhvNC0L7l_pI_aawOKM8F-KbUH6-86Z-_rlP5ccaBJw_ecpdBTCsR3iyBf4MuWYUMOGkFWlOp7ELpxcedltl4lu0TcXjevhrV2SBNFaKBNNVyf_mm4K_HFkZkyNNLWbqKbRV6f5VV1TIPrr5_8viPePFBbXPZPcYL3ePY/s16000-rw/638854393974469059.jpg" alt="Área Selecionada" class="w-full h-40 object-cover rounded-xl mb-4 shadow-sm">
                            
                            <p id="detail-description" class="text-gray-600 text-sm mb-6 leading-relaxed">Clique em um dos <strong>Pontos de Interesse</strong> no mapa para iniciar o tour virtual por nossos ambientes!</p>

<a id="detail-link" href="#" target="_blank" class="hidden w-full text-center py-2.5 px-4 bg-secondary text-white text-sm font-bold rounded-lg shadow hover:bg-secondary-dark transition">
                                Ver Detalhes
                            </a>

<div id="area-status" class="mt-4 p-3 rounded-lg text-sm font-semibold hidden transition duration-300">
                                <p>✅ Área Explorada!</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

<section id="faq" class="py-16 bg-white pt-24 -mt-8">
            <div class="max-w-7xl mx-auto px-4">
                <div class="text-center mb-12">
                    <h2 class="text-3xl font-extrabold text-primary mb-4">Perguntas Frequentes (FAQ)</h2>
                    <p class="text-gray-600">Tire suas dúvidas sobre nossos cursos, certificados e metodologia.</p>
                </div>

<div class="flex flex-col md:flex-row flex-wrap justify-center gap-6">
                    
                    
                    <div class="w-full md:w-[340px] h-[120px] flex bg-white rounded-xl shadow-md border border-gray-200 overflow-hidden hover:shadow-lg transition-shadow">
                        <div class="w-[110px] bg-[#b9002d] flex flex-col items-center justify-center text-white p-2 text-center">
                            <i class="fa-regular fa-file-excel text-4xl mb-1"></i>
                            <span class="text-[10px] font-semibold leading-tight">Cancelamento</span>
                        </div>
                        <div class="flex-1 p-4 flex flex-col justify-between">
                            <div>
                                <h4 class="font-bold text-gray-800 text-sm truncate">Como realizar o cancelamento...</h4>
                                <p class="text-xs text-gray-400 mt-1 flex items-center gap-1"><i class="fa-solid fa-user text-[10px]"></i> faq</p>
                            </div>
                            <a href="https://www.inovaeducacional.com.br/2023/10/como-realizar-o-cancelamento.html" target="_blank" class="bg-gray-100 hover:bg-gray-200 text-gray-800 text-xs font-bold py-1.5 px-4 rounded-md self-start w-full transition text-center block">Saiba Mais</a>
                        </div>
                    </div>

<div class="w-full md:w-[340px] h-[120px] flex bg-white rounded-xl shadow-md border border-gray-200 overflow-hidden hover:shadow-lg transition-shadow">
                        <div class="w-[110px] bg-[#2d7317] flex flex-col items-center justify-center text-white p-2 text-center">
                            <i class="fa-solid fa-file-contract text-4xl mb-1"></i>
                            <span class="text-[10px] font-semibold leading-tight">Certificado</span>
                        </div>
                        <div class="flex-1 p-4 flex flex-col justify-between">
                            <div>
                                <h4 class="font-bold text-gray-800 text-sm truncate">Sobre nosso certificado...</h4>
                                <p class="text-xs text-gray-400 mt-1 flex items-center gap-1"><i class="fa-solid fa-user text-[10px]"></i> faq</p>
                            </div>
                            <a href="https://www.inovaeducacional.com.br/2023/11/sobre-nosso-certificado.html" target="_blank" class="bg-gray-100 hover:bg-gray-200 text-gray-800 text-xs font-bold py-1.5 px-4 rounded-md self-start w-full transition text-center block">Saiba Mais</a>
                        </div>
                    </div>

<div class="w-full md:w-[340px] h-[120px] flex bg-white rounded-xl shadow-md border border-gray-200 overflow-hidden hover:shadow-lg transition-shadow">
                        <div class="w-[110px] bg-[#0000b3] flex flex-col items-center justify-center text-white p-2 text-center">
                            <i class="fa-solid fa-network-wired text-3xl mb-1"></i>
                            <i class="fa-regular fa-hand-pointer text-xl absolute ml-4 mt-2"></i> 
                            <span class="text-[10px] font-semibold leading-tight mt-3">Método</span>
                        </div>
                        <div class="flex-1 p-4 flex flex-col justify-between">
                            <div>
                                <h4 class="font-bold text-gray-800 text-sm truncate">Sobre nossa Metodologia...</h4>
                                <p class="text-xs text-gray-400 mt-1 flex items-center gap-1"><i class="fa-solid fa-user text-[10px]"></i> faq</p>
                            </div>
                            <a href="https://www.inovaeducacional.com.br/2023/12/metodointerativo.html" target="_blank" class="bg-gray-100 hover:bg-gray-200 text-gray-800 text-xs font-bold py-1.5 px-4 rounded-md self-start w-full transition text-center block">Saiba Mais</a>
                        </div>
                    </div>

<div class="w-full md:w-[340px] h-[120px] flex bg-white rounded-xl shadow-md border border-gray-200 overflow-hidden hover:shadow-lg transition-shadow">
                        <div class="w-[110px] bg-[#f27405] flex flex-col items-center justify-center text-white p-2 text-center">
                            <i class="fa-solid fa-paw text-3xl mb-1"></i>
                            <span class="text-[10px] font-semibold leading-tight">Amigo da<br>Onça</span>
                        </div>
                        <div class="flex-1 p-4 flex flex-col justify-between">
                            <div>
                                <h4 class="font-bold text-gray-800 text-sm truncate">Tenho benefício ao indicar...</h4>
                                <p class="text-xs text-gray-400 mt-1 flex items-center gap-1"><i class="fa-solid fa-user text-[10px]"></i> faq</p>
                            </div>
                            <a href="https://www.inovaeducacional.com.br/p/amigo-da-onca.html" target="_blank" class="bg-gray-100 hover:bg-gray-200 text-gray-800 text-xs font-bold py-1.5 px-4 rounded-md self-start w-full transition text-center block">Saiba Mais</a>
                        </div>
                    </div>

</div>
            </div>
        </section>

<section id="validar-certificado" class="py-12 bg-gray-50 pt-24 -mt-8">
            <div class="max-w-5xl mx-auto px-4">
                <div class="bg-primary rounded-3xl shadow-2xl p-8 md:p-12 text-center relative overflow-hidden">
                    
                    <div class="absolute top-0 right-0 -mt-10 -mr-10 w-40 h-40 bg-white opacity-10 rounded-full blur-2xl"></div>
                    <div class="absolute bottom-0 left-0 -mb-10 -ml-10 w-40 h-40 bg-secondary opacity-20 rounded-full blur-2xl"></div>
                    
                    <i class="fa-solid fa-award text-5xl text-secondary mb-4 relative z-10"></i>
                    <h2 class="text-3xl font-extrabold text-white mb-4 relative z-10">Validar Meu Certificado</h2>
                    <p class="text-blue-100 text-lg mb-8 max-w-2xl mx-auto relative z-10">
                        Garantimos a autenticidade da sua formação. Verifique a validade do seu certificado Inova Cursos de forma rápida e segura.
                    </p>
                    <a href="https://suportedksoft.com.br/certificado/" target="_blank" class="inline-block bg-secondary hover:bg-secondary-dark text-white text-lg font-bold py-4 px-10 rounded-xl shadow-lg transform transition hover:-translate-y-1 relative z-10">
                        <i class="fa-solid fa-shield-halved mr-2"></i> Acessar Validador Oficial
                    </a>
                </div>
            </div>
        </section>

</main>

<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 Reclame Aqui" 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" target="_blank" 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 src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
    <script>
        /* === MENU MOBILE Toggles === */
        const btnMenu = document.getElementById('btn-mobile-menu');
        const btnClose = document.getElementById('btn-close-menu');
        const mobileMenu = document.getElementById('mobile-menu');
        const mobileMenuContent = document.getElementById('mobile-menu-content');

/* === SWIPER GALERIA === */
        var swiper = new Swiper(".mySwiper", {
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            loop: true,
            autoplay: {
                delay: 3500,
                disableOnInteraction: false,
            },
        });

/* === MAPA INTERATIVO DA ESTRUTURA === */
        const structureData = {
            areas: [
                {
                    id: 'recepcao',
                    title: 'Recepção e Atendimento',
                    description: 'Seu primeiro ponto de contato. Um ambiente acolhedor e confortável, com equipe sempre pronta para auxiliar.',
                    image: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj29-8BkFCQZaPMXUFjxEXC62Pz1yAeuoIFPoFWDLBtn5kaN_xARqlyQLJdoTKWnap2umRZUkLgE1kikSIQjTloJ4vg8UMhYNpSts3qlf05Z0t-ZWpjW5sl4Syh9ipB5fSu9J9eg4W7oiGDOa2thjSYdCvyaPFGUXJfN0FpaJTRfpXdxngTVLDhKb2klis/s320-rw/IMG-20230711-WA0050.jpg',
                    link: 'https://www.inovaeducacional.com.br/2023/10/recepcao.html',
                    pos: { top: '30%', left: '25%' },
                    iconSVG: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>'
                },
                {
                    id: 'sala-de-aula',
                    title: 'Sala de Aula Climatizada',
                    description: 'Espaço climatizado e equipado com recursos audiovisuais para aulas teóricas e treinamentos de alta performance.',
                    image: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf2872x8Tp9BJx3X4caRhTZaU1piNeHqQS5cXcjDPXanBybTY2I7sHDVL28PJ8q3tgWlVVe2aEltA66dsvVvD7u38r10evM0709Iz7JYfyGu5k2TA1LHFeeGZFSRcLJDhDj3I1HumgycvConP4caH57rR35Rh08BZKSy7GzrKuNbuJ5WAyGoedyznCyT8/s1600-rw/IMG-20230711-WA0045.jpg',
                    link: 'https://www.inovaeducacional.com.br/2023/10/sala-de-aula.html',
                    pos: { top: '55%', left: '48%' },
                    iconSVG: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2c-3.86 0-7 3.14-7 7 0 3.86 3.14 7 7 7s7-3.14 7-7c0-3.86-3.14-7-7-7zm0 13c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm0 2c-2.67 0-8 1.34-8 4v1h16v-1c0-2.66-5.33-4-8-4z"/></svg>'
                },
                {
                    id: 'laboratorio',
                    title: 'Laboratório de Informática',
                    description: 'Setor de alta tecnologia com computadores modernos para cursos interativos, simulações e agendamento de estudos.',
                    image: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDPMlakgrS592zrKQlYKAmyXo_GSl3WaBkF8GrzXi7gPI_BJdXKzS8PnyQXrru_aE1g6evhHA0E2bRGTOfPFiwAhgBSCylseIxqdjDPeeghI-5ZoECLFQHpCuriv97wlXcRVnhAzcEz40u2LP_UV0uaNEoEifNWkLs9SrrzIPdL_93zOZKdou-_cm5Ni8/s1600/IMG-20230711-WA0039(1).jpgg',
                    link: 'https://www.inovaeducacional.com.br/2023/10/laboratorio-informatizado.html',
                    pos: { top: '38%', left: '75%' },
                    iconSVG: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M20 18c1.1 0 1.99-.9 1.99-2L22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H.99L2 21h20l-1.01-3H20zM4 6h16v10H4V6z"/></svg>'
                },
                {
                    id: 'biblioteca',
                    title: 'Área de Leitura e Biblioteca',
                    description: 'Seu canto de leitura e pesquisa. Acesso rápido e fácil ao nosso acervo físico e virtual para aprofundar seus conhecimentos.',
                    image: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrS9gNCc_PY-KfbAhL0w4qZgvHLNYT5zqtQfQ0vPCLk39vY3-rXV2K-HAn0e3zTkjb-vyxeF4u6UMd3q8cMNmA2JQt37XdIA_IpRyo1CbXQ5-5_TOrX8TyOzPGYcPxgXezCJOsqBjvAl0D8J5jlWXJEJ367F_F_seKhkm2a-Ygci3urD0llRwzwJ9iNAk/w680-rw/IMG-20230711-WA0047.jpg',
                    link: 'https://www.inovaeducacional.com.br/2023/10/biblioteca.html',
                    pos: { top: '75%', left: '20%' },
                    iconSVG: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M21 21.36H3V3.64h18v17.72zM5 19.36h14V5.64H5v13.72zm2-2.5h10v-2H7v2zm0-4h10v-2H7v2z"/></svg>'
                }
            ]
        };

let exploredAreas = JSON.parse(localStorage.getItem('inovaMapExplored')) || {};
        const totalAreas = structureData.areas.length;

function initializeMap() {
            const mapContainer = document.getElementById('map-container');
            if(!mapContainer) return;
            
            structureData.areas.forEach(area => {
                const button = document.createElement('button');
                
                button.className = 'hotspot bg-blue-500 text-white hover:bg-blue-600 transition duration-300 shadow-xl pulsing';
                button.style.top = area.pos.top;
                button.style.left = area.pos.left;
                button.setAttribute('data-area-id', area.id);
                button.innerHTML = area.iconSVG; 
                button.onclick = () => showDetail(area);

if (exploredAreas[area.id]) {
                    button.classList.remove('bg-blue-500', 'hover:bg-blue-600', 'pulsing');
                    button.classList.add('bg-orange-500', 'hover:bg-orange-600'); 
                    button.style.boxShadow = '0 0 0 0 rgba(249, 115, 22, 0.4)'; 
                }

mapContainer.appendChild(button);
            });
            updateProgress();
        }

function showDetail(area) {
            document.getElementById('detail-title').textContent = area.title;
            document.getElementById('detail-image').src = area.image;
            document.getElementById('detail-image').alt = 'Foto de ' + area.title;
            document.getElementById('detail-description').innerHTML = '<strong>Descrição:</strong> ' + area.description;
            
            const detailLink = document.getElementById('detail-link');
            detailLink.href = area.link;
            detailLink.classList.remove('hidden');

const detailPanel = document.getElementById('detail-panel');
            if (window.innerWidth < 768 && detailPanel) {
                detailPanel.classList.add('active');
            }
        }
        
        function closeDetailPanel() {
            const dp = document.getElementById('detail-panel');
            if(dp) dp.classList.remove('active');
        }

function updateProgress() {
            const exploredCount = Object.keys(exploredAreas).length;
            const progressPercentage = Math.round((exploredCount / totalAreas) * 100);

Quem Somos

Siga a escola:

Pesquise aqui o que você precisa

Sobre a INOVA

Siga-nos

buttons=(Tá bom !) days=(10)

Contact form