Sobre nosso certificado

Certificado Inova Cursos Certificado Profissionalizante

<!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>Certificados e Qualificação - INOVA Educacional</title>
    
    
    <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'
                        },
                        inova: {
                            blue: '#007bff',
                            darkblue: '#0056b3',
                            navy: '#1e293b',
                            orange: '#ff8c00',
                            orangeHover: '#e07b00',
                        }
                    },
                    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>

<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">
    
    
    <style>
        body { font-family: 'Inter', sans-serif; }
        
        /* Estilos Originais do Header/Footer */
        .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); }
        }
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Estilos da Seção de Certificados */
        .oculta { display: none; }
        .fade-in { animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
        @keyframes fadeIn {
            from { opacity: 0; transform: scale(0.98); }
            to { opacity: 1; transform: scale(1); }
        }
        .slide-active { display: flex !important; }
        
        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: #f1f5f9;
            border-radius: 4px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 4px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }
    </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" target="_blank" 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/" target="_blank" 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/" target="_blank" class="hover:text-white transition"><i class="fa-brands fa-instagram"></i></a>
                <a href="https://x.com/Inova_Cursos_" target="_blank" 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/p/home.html" 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="hover:text-secondary transition">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="DIPLOMA 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/" target="_blank" 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/" target="_blank" class="hover:text-primary transition"><i class="fa-brands fa-instagram"></i></a>
                </div>
            </div>
        </div>
    </div>

<main class="flex-grow container mx-auto px-3 sm:px-6 py-10 relative z-20">
        
        
        <img alt="Imagem a ser carregada" class="oculta" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiyjVmaYQfQNGnYYIoi8yFxpYNBRDpewMaNV4DKKKYNeY4jloGpBSYYG091iSx2f-PdYu67et5aO3zR1MLW6eU2wKDn83zPHPa7VkjPt__u-hc_4JiS7Xm4iai0F_gWGJ4s3e-SPgDCpJZTQm93QtbHDgL5p1566xUVn9KbXtMomxVN7KGIcIBbpxThjgX/s16000/cert.png" onerror="this.style.display='none'" />

<div id="inova-certificado-wrapper" class="max-w-5xl mx-auto space-y-8">
            
            
            <header class="bg-white rounded-2xl shadow-sm border border-slate-200/80 p-6 sm:p-8 relative overflow-hidden">
                <div class="absolute top-0 right-0 -mt-8 -mr-8 w-40 h-40 bg-blue-500/10 rounded-full blur-2xl pointer-events-none"></div>
                <div class="relative z-10 flex flex-col md:flex-row md:items-center justify-between gap-6">
                    <div>
                        <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-50 text-blue-600 text-xs font-semibold tracking-wide uppercase mb-3">
                            <i class="fa-solid fa-award"></i> Credibilidade & Transparência
                        </div>
                        <h1 class="text-2xl sm:text-3xl font-extrabold text-slate-900 tracking-tight">
                            Certificados e Qualificação
                        </h1>
                        <p class="text-slate-600 mt-2 text-sm sm:text-base max-w-2xl">
                            Conheça os detalhes de validação, amparo legal e credenciamento oficial dos nossos certificados e diplomas em todo o Brasil.
                        </p>
                    </div>
                    
                    <div class="flex flex-wrap gap-2 sm:gap-3 shrink-0">
                        <div class="bg-slate-100 border border-slate-200 rounded-xl px-3 py-2 text-center">
                            <span class="block text-xs text-slate-500 font-medium">Validade</span>
                            <span class="text-xs font-bold text-slate-800">Nacional</span>
                        </div>
                        <div class="bg-slate-100 border border-slate-200 rounded-xl px-3 py-2 text-center">
                            <span class="block text-xs text-slate-500 font-medium">Polo UniCIVE</span>
                            <span class="text-xs font-bold text-blue-600">Reconhecido MEC</span>
                        </div>
                        <div class="bg-slate-100 border border-slate-200 rounded-xl px-3 py-2 text-center">
                            <span class="block text-xs text-slate-500 font-medium">Trânsito</span>
                            <span class="text-xs font-bold text-amber-600">Portaria DENATRAN</span>
                        </div>
                    </div>
                </div>
            </header>

<section class="bg-white rounded-2xl shadow-sm border border-slate-200/80 p-6 sm:p-8 space-y-6">
                <div class="border-l-4 border-blue-600 pl-4 py-1">
                    <h2 class="text-xl sm:text-2xl font-bold text-slate-900 flex items-center gap-2">
                        <i class="fa-solid fa-graduation-cap text-blue-600"></i> Cursos Profissionalizantes
                    </h2>
                    <p class="text-slate-600 text-sm mt-1">
                        O certificado dos cursos livres Profissionalizantes da <strong>INOVA CURSOS</strong> é válido em todo território nacional, podendo ser apresentado com credibilidade para:
                    </p>
                </div>

<div class="grid sm:grid-cols-2 gap-3 pt-2">
                    <div class="flex items-start gap-3 p-3.5 rounded-xl bg-slate-50 border border-slate-100 hover:border-blue-200 transition-colors">
                        <div class="w-8 h-8 rounded-lg bg-blue-100 text-blue-600 flex items-center justify-center shrink-0 mt-0.5">
                            <i class="fa-solid fa-clock"></i>
                        </div>
                        <span class="text-sm text-slate-700 font-medium">Horas complementares e atividades extracurriculares em universidades</span>
                    </div>
                    <div class="flex items-start gap-3 p-3.5 rounded-xl bg-slate-50 border border-slate-100 hover:border-blue-200 transition-colors">
                        <div class="w-8 h-8 rounded-lg bg-blue-100 text-blue-600 flex items-center justify-center shrink-0 mt-0.5">
                            <i class="fa-solid fa-file-invoice"></i>
                        </div>
                        <span class="text-sm text-slate-700 font-medium">Valorizar seu currículo profissional para novas vagas</span>
                    </div>
                    <div class="flex items-start gap-3 p-3.5 rounded-xl bg-slate-50 border border-slate-100 hover:border-blue-200 transition-colors">
                        <div class="w-8 h-8 rounded-lg bg-blue-100 text-blue-600 flex items-center justify-center shrink-0 mt-0.5">
                            <i class="fa-solid fa-chart-line"></i>
                        </div>
                        <span class="text-sm text-slate-700 font-medium">Avaliações e promoções internas nas empresas</span>
                    </div>
                    <div class="flex items-start gap-3 p-3.5 rounded-xl bg-slate-50 border border-slate-100 hover:border-blue-200 transition-colors">
                        <div class="w-8 h-8 rounded-lg bg-blue-100 text-blue-600 flex items-center justify-center shrink-0 mt-0.5">
                            <i class="fa-solid fa-sack-dollar"></i>
                        </div>
                        <span class="text-sm text-slate-700 font-medium">Gratificações adicionais de acordo com plano de carreira</span>
                    </div>
                </div>

<div class="pt-4 border-t border-slate-100">
                    <h3 class="text-center font-bold text-slate-800 text-lg mb-6">
                        NOVO MODELO do Certificado de Conclusão de Curso
                    </h3>

<div class="grid md:grid-cols-2 gap-6">
                        
                        <div class="certificate-image-container group bg-slate-50 border border-slate-200 rounded-xl p-4 text-center hover:shadow-md transition-all">
                            <div class="relative overflow-hidden rounded-lg border border-slate-200 bg-white mb-3 cursor-pointer" onclick="openModal('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9CNwwqC81wsli7JL0YAex2GDwvTnn-yOMGk76utBmRYqnjzweZYTR8UuZI0OmkzWAwvqydWrJIEZ7NIlBms_MeDovgYLlHcfhKD6DUKMbziZqtnLZIt3G3w-vardNjp-Cu2Vp6LtBre0tq9GNw7ECKkuSSDDVLgfFkNInjoeUumvCjRZGMtzteBHrm9GV/s1600/frenteautocad.PNG', 'Frente do Certificado')">
                                <img alt="Frente do Certificado" 
                                     src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9CNwwqC81wsli7JL0YAex2GDwvTnn-yOMGk76utBmRYqnjzweZYTR8UuZI0OmkzWAwvqydWrJIEZ7NIlBms_MeDovgYLlHcfhKD6DUKMbziZqtnLZIt3G3w-vardNjp-Cu2Vp6LtBre0tq9GNw7ECKkuSSDDVLgfFkNInjoeUumvCjRZGMtzteBHrm9GV/s1600/frenteautocad.PNG"
                                     class="w-full h-auto object-contain max-h-[280px] mx-auto transform group-hover:scale-105 transition-transform duration-300"
                                     onerror="this.src='https://placehold.co/600x420/e2e8f0/475569?text=Frente+do+Certificado'" />
                                <button class="absolute bottom-3 right-3 bg-slate-900/80 hover:bg-slate-900 text-white p-2 rounded-lg text-xs backdrop-blur-sm transition-colors flex items-center gap-1.5 shadow-lg">
                                    <i class="fa-solid fa-magnifying-glass-plus"></i> Ampliar
                                </button>
                            </div>
                            <p class="certificate-caption">
                                <button onclick="openModal('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9CNwwqC81wsli7JL0YAex2GDwvTnn-yOMGk76utBmRYqnjzweZYTR8UuZI0OmkzWAwvqydWrJIEZ7NIlBms_MeDovgYLlHcfhKD6DUKMbziZqtnLZIt3G3w-vardNjp-Cu2Vp6LtBre0tq9GNw7ECKkuSSDDVLgfFkNInjoeUumvCjRZGMtzteBHrm9GV/s1600/frenteautocad.PNG', 'Frente do Certificado')" class="text-blue-600 font-semibold hover:underline inline-flex items-center gap-1 text-sm bg-transparent border-none cursor-pointer">
                                    <i class="fa-solid fa-circle-info"></i> Visualizar Frente do Certificado
                                </button>
                            </p>
                        </div>

<div class="certificate-image-container group bg-slate-50 border border-slate-200 rounded-xl p-4 text-center hover:shadow-md transition-all">
                            <div class="relative overflow-hidden rounded-lg border border-slate-200 bg-white mb-3 cursor-pointer" onclick="openModal('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_1JFcKStzg6C_l7AVhqPSIg978xRGIbp3PsdF8gAXCSz-VE2Uc3v-2SgieHQOSsPpQcjDaMc_1uGfhq02mMTHynbVmf6h9psOgEH4tu2S-5IK1rNptI9X6n-3q_f3kSe8oytkqCyVmXKYXp3J1GpoA_4oNq_P3cLO0rDFoJWLnc6-jOeL2d5mtBo40smK/s1600/versoautocad.png', 'Verso do Certificado')">
                                <img alt="Verso do Certificado" 
                                     src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_1JFcKStzg6C_l7AVhqPSIg978xRGIbp3PsdF8gAXCSz-VE2Uc3v-2SgieHQOSsPpQcjDaMc_1uGfhq02mMTHynbVmf6h9psOgEH4tu2S-5IK1rNptI9X6n-3q_f3kSe8oytkqCyVmXKYXp3J1GpoA_4oNq_P3cLO0rDFoJWLnc6-jOeL2d5mtBo40smK/s1600/versoautocad.png"
                                     class="w-full h-auto object-contain max-h-[280px] mx-auto transform group-hover:scale-105 transition-transform duration-300"
                                     onerror="this.src='https://placehold.co/600x420/e2e8f0/475569?text=Verso+do+Certificado'" />
                                <button class="absolute bottom-3 right-3 bg-slate-900/80 hover:bg-slate-900 text-white p-2 rounded-lg text-xs backdrop-blur-sm transition-colors flex items-center gap-1.5 shadow-lg">
                                    <i class="fa-solid fa-magnifying-glass-plus"></i> Ampliar
                                </button>
                            </div>
                            <p class="certificate-caption">
                                <button onclick="openModal('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_1JFcKStzg6C_l7AVhqPSIg978xRGIbp3PsdF8gAXCSz-VE2Uc3v-2SgieHQOSsPpQcjDaMc_1uGfhq02mMTHynbVmf6h9psOgEH4tu2S-5IK1rNptI9X6n-3q_f3kSe8oytkqCyVmXKYXp3J1GpoA_4oNq_P3cLO0rDFoJWLnc6-jOeL2d5mtBo40smK/s1600/versoautocad.png', 'Verso do Certificado')" class="text-blue-600 font-semibold hover:underline inline-flex items-center gap-1 text-sm bg-transparent border-none cursor-pointer">
                                    <i class="fa-solid fa-circle-info"></i> Visualizar Verso do Certificado
                                </button>
                            </p>
                        </div>
                    </div>
                </div>

<div class="bg-amber-50 border border-amber-200 rounded-2xl p-6 text-center space-y-4 mt-6">
                    <p class="text-slate-700 text-sm sm:text-base font-medium max-w-xl mx-auto">
                        Todos os certificados emitidos pela <strong>INOVA CURSOS</strong> poderão ser consultados por empresas, instituições de ensino, órgãos públicos e instituições empregadoras em geral.
                    </p>
                    <div>
                        <a class="inline-flex items-center gap-2 bg-amber-500 hover:bg-amber-600 text-white font-bold px-6 py-3.5 rounded-xl shadow-lg shadow-amber-500/20 hover:shadow-amber-500/30 transition-all transform active:scale-95 text-sm sm:text-base"
                           href="https://www.inovaeducacional.com.br/p/consulta-de-certificado.html" 
                           target="_blank" 
                           rel="noopener">
                            <i class="fa-solid fa-shield-halved"></i> CONSULTAR CERTIFICADO AQUI
                        </a>
                    </div>
                </div>

<div class="bg-slate-50 border border-slate-200 rounded-xl p-4 text-xs sm:text-sm text-slate-600 space-y-2">
                    <p>
                        <i class="fa-solid fa-scale-balanced text-slate-400 mr-1"></i>
                        Nossos cursos são classificados como <strong>livres, de qualificação profissional</strong>, e são reconhecidos conforme <strong>Lei nº 9.394</strong> e <strong>Decreto Presidencial nº 5.154</strong>.
                    </p>
                    <p class="text-slate-500 italic">
                        * O MEC só autoriza cursos de graduação e de pós-graduação. Nossos cursos PROFISSIONALIZANTES são cursos livres, para sua atualização ou qualificação: <strong>NÃO é um certificado técnico profissionalizante.</strong>
                    </p>
                </div>
            </section>

<section class="bg-white rounded-2xl shadow-sm border border-slate-200/80 p-6 sm:p-8 space-y-6">
                <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-slate-100 pb-4">
                    <div>
                        <h3 class="text-xl font-bold text-slate-900 flex items-center gap-2">
                            <i class="fa-solid fa-users text-blue-600"></i> Fotos de Alunos Certificados
                        </h3>
                        <p class="text-slate-500 text-xs sm:text-sm">Alunos que já garantiram sua qualificação profissional</p>
                    </div>
                    
                    <div class="inline-flex rounded-xl bg-slate-100 p-1 border border-slate-200 self-start sm:self-auto">
                        <button id="view-carousel-btn" onclick="toggleGalleryView('carousel')" class="px-3 py-1.5 rounded-lg text-xs font-semibold bg-white text-slate-800 shadow-sm transition-all flex items-center gap-1.5">
                            <i class="fa-solid fa-images"></i> Carrossel
                        </button>
                        <button id="view-grid-btn" onclick="toggleGalleryView('grid')" class="px-3 py-1.5 rounded-lg text-xs font-semibold text-slate-600 hover:text-slate-900 transition-all flex items-center gap-1.5">
                            <i class="fa-solid fa-grip"></i> Ver Todos (<span id="total-photos-badge">24</span>)
                        </button>
                    </div>
                </div>

<div id="hcg-slider-1" class="hcg-slider relative bg-slate-900 rounded-2xl p-4 sm:p-6 overflow-hidden">
                    <div class="hcg-slide-container relative max-w-full mx-auto">
                        <div class="hcg-slider-body relative min-h-[260px] sm:min-h-[360px] flex items-center justify-center rounded-xl bg-black/40 overflow-hidden">
                            
                        </div>
                        <button id="hcg-slide-prev" aria-label="Anterior" class="absolute left-2 sm:left-4 top-1/2 -translate-y-1/2 w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-slate-900/80 hover:bg-blue-600 text-white flex items-center justify-center shadow-lg transition-all border border-white/20 active:scale-95 z-10">
                            <i class="fa-solid fa-chevron-left text-sm sm:text-base"></i>
                        </button>
                        <button id="hcg-slide-next" aria-label="Próximo" class="absolute right-2 sm:right-4 top-1/2 -translate-y-1/2 w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-slate-900/80 hover:bg-blue-600 text-white flex items-center justify-center shadow-lg transition-all border border-white/20 active:scale-95 z-10">
                            <i class="fa-solid fa-chevron-right text-sm sm:text-base"></i>
                        </button>
                    </div>
                    <div class="mt-4 flex flex-wrap items-center justify-between gap-3 px-2">
                        <div class="hcg-slide-dot-control flex items-center gap-1.5 overflow-x-auto max-w-full py-1 custom-scrollbar"></div>
                        <button id="pause-carousel-btn" onclick="toggleAutoPlay()" class="text-slate-400 hover:text-white text-xs font-medium flex items-center gap-1 bg-slate-800/80 px-2.5 py-1 rounded-md border border-slate-700 transition-colors">
                            <i class="fa-solid fa-pause" id="pause-icon"></i> <span id="pause-text">Pausar</span>
                        </button>
                    </div>
                </div>

<div id="grid-gallery-container" class="hidden">
                    <div id="photos-grid" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 max-h-[500px] overflow-y-auto p-1 custom-scrollbar">
                        
                    </div>
                </div>
            </section>

<section class="bg-white rounded-2xl shadow-sm border border-slate-200/80 p-6 sm:p-8 space-y-6">
                <div class="border-l-4 border-blue-600 pl-4 py-1">
                    <h3 class="text-xl sm:text-2xl font-bold text-slate-900 flex items-center gap-2">
                        <i class="fa-solid fa-building-columns text-blue-600"></i> Cursos Superiores
                    </h3>
                </div>
                <div class="bg-blue-50/70 border border-blue-200/80 rounded-2xl p-6 space-y-4">
                    <div class="flex flex-col md:flex-row items-center justify-between gap-6">
                        <div class="space-y-3">
                            <p class="text-slate-700 text-sm sm:text-base leading-relaxed">
                                Por meio da <strong>PORTARIA DA REITORIA Nº 511/2021</strong>, somos polo do <strong>UniCIVE</strong> com credenciamento no MEC e aptos a ofertar educação superior.
                            </p>
                            <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg bg-emerald-100 border border-emerald-300 text-emerald-800 font-bold text-xs sm:text-sm">
                                <i class="fa-solid fa-circle-check text-emerald-600"></i> DIPLOMAS RECONHECIDOS NACIONALMENTE PELO MEC
                            </div>
                        </div>
                        <div class="shrink-0 text-center w-full md:w-auto">
                            <a class="inline-flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 text-white font-bold px-6 py-3.5 rounded-xl shadow-lg shadow-blue-600/20 transition-all transform active:scale-95 text-sm w-full md:w-auto"
                               href="https://unicv.edu.br/consulta-publica/" 
                               target="_blank" 
                               rel="noopener">
                                <i class="fa-solid fa-magnifying-glass"></i> CONSULTA DE DIPLOMAS AQUI
                            </a>
                        </div>
                    </div>
                    <div class="pt-4 border-t border-blue-200/60 flex justify-center">
                        <a href="https://unicv.edu.br/" target="_blank" rel="noopener" class="inline-block p-3 bg-white rounded-xl border border-blue-100 hover:border-blue-300 shadow-sm transition-all transform hover:scale-105">
                            <img alt="Logo UniCV" 
                                 src="https://blogger.googleusercontent.com/img/a/AVvXsEiOGWMCpc2lBbmsOUuyMNZxTj0d_hqe5qVk_UnfChZ-R4kTtUPDtvJf3F92SVkytBaH201e3ZAvPEZo2obWTu81WRKgWqDqutfgCbkciHa6_lE5PDWLk0aBAnftzfGvtW5cQpQ6O37b5c-fXlv9VluRKPSGv3W68FocIPeiaYgWBXmk1_w7J3YWAi12l6A=s231-rw" 
                                 width="160" 
                                 height="150" 
                                 class="h-16 w-auto object-contain mx-auto"
                                 onerror="this.src='https://placehold.co/230x200/ffffff/007bff?text=Logo+UniCV'" />
                        </a>
                    </div>
                </div>
            </section>

<section class="bg-white rounded-2xl shadow-sm border border-slate-200/80 p-6 sm:p-8 space-y-4">
                <div class="border-l-4 border-amber-500 pl-4 py-1">
                    <h3 class="text-xl font-bold text-slate-900 flex items-center gap-2">
                        <i class="fa-solid fa-car text-amber-500"></i> Cursos de Trânsito
                    </h3>
                </div>
                <div class="bg-amber-50/50 border border-amber-200/70 rounded-xl p-5 text-slate-700 text-sm space-y-3">
                    <p>
                        Somos credenciados para ofertar cursos válidos de trânsito pela <strong>Portaria DENATRAN nº 376</strong>, de 26 de Março de 2021.
                    </p>
                    <div class="p-3 bg-white/80 rounded-lg border border-amber-200/50 text-xs text-slate-500 italic">
                        <i class="fa-solid fa-circle-info text-amber-500 mr-1"></i>
                        <strong>Obs.:</strong> Cursos EJA (Supletivo) e Técnicos nós apenas indicamos para instituições parceiras e elas fazem as respectivas certificações para os alunos.
                    </div>
                </div>
            </section>
        </div>
    </main>

<div id="image-modal" class="fixed inset-0 z-50 bg-black/90 hidden backdrop-blur-sm items-center justify-center p-4 transition-all" onclick="closeModal()">
        <div class="relative max-w-4xl w-full max-h-[90vh] flex flex-col items-center" onclick="event.stopPropagation()">
            <button onclick="closeModal()" class="absolute -top-12 right-0 text-white hover:text-amber-400 text-2xl p-2 transition-colors">
                <i class="fa-solid fa-xmark"></i> Fechar
            </button>
            <img id="modal-img" src="" alt="Imagem ampliada" class="max-w-full max-h-[80vh] object-contain rounded-xl shadow-2xl border border-white/10">
            <p id="modal-caption" class="text-white text-center mt-3 text-sm font-medium"></p>
        </div>
    </div>

<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" 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>
    // 1. Script Original de Funcionamento do Menu Mobile (Isolado e Seguro)
    document.addEventListener("DOMContentLoaded", () => {
        const btnMobileMenu = document.getElementById('btn-mobile-menu');
        const btnCloseMenu = document.getElementById('btn-close-menu');
        const mobileMenu = document.getElementById('mobile-menu');
        const mobileMenuContent = document.getElementById('mobile-menu-content');

if (btnMobileMenu && btnCloseMenu && mobileMenu) {
            btnMobileMenu.addEventListener('click', () => {
                mobileMenu.classList.remove('opacity-0', 'pointer-events-none');
                mobileMenuContent.classList.remove('translate-x-full');
            });
            btnCloseMenu.addEventListener('click', () => {
                mobileMenu.classList.add('opacity-0', 'pointer-events-none');
                mobileMenuContent.classList.add('translate-x-full');
            });
        }
    });

// 2. Script do Carrossel e Modal (Página do Certificado)
    (() => {
        const images_list = [
            { "url": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaBFnEtnH4de6Ci2Waz3visCJzFL-g3fFLarEq-n9Ta9oI8oV8dlhb01cr8isr6FmAX9dAzQJ8McVY9GbXc9WP1f2Q9VgF8JM-JwA3FisaKHW9-aAtF-6w86q8mM1apFwkz74JlfTRQMDNsYuLrzA-AaMBuj9T7sGR7QHf-9IY_Z7SGZxr3RzrBJQMTab5/s320/201429878_1726634624205798_618391815697632156_n.jpg", "alt": "Aluno Certificado 1", "name": "Aluno 1" },
            { "url": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3pferdHeSzZ-w4NJHEIcVJpXPUUcnPWh7ArQBQPPxAVY_y3oB84vaz5D0sEprc3mNBV9N27fvEJwLJgR6UDy-3Z600W3168yjZU4eGZ2X3wa3e7GPxeah5t9f0Dnrn3sEAL9yR_dxMLYxCF58M5QQ9jZuPedjm6ZFAgtSb20xhAbSz4bnT8J9IPnoIDRG/s320/203655269_1730906283778632_5555663447856267224_n.jpg", "alt": "Aluno Certificado 2", "name": "Aluno 2" },
            { "url": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqxxhyphenhyphenDaw88SCgmaF6ucOWnEUjYu0UFgt4mxfh1L5HvJvmfklww4VlXzoM8MnbXei6PULPPRrdzxynCt-tAAS7EZT2vCe9zvbeqOkaIadwMN-w7r5a_RDl8nCjUIpgBgjCjB_jg0zNyNNFlTW2niZql18MKL6YjMBdBlrbOn-7f9yCDNp4dhOtCsgDPc9G/s320/240822759_1781332952069298_4250436862262242140_n.png", "alt": "Aluno Certificado 3", "name": "Aluno 3" },
            { "url": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6VjhvLx2z6-7AGZbwyQDExZjKMAom4ioKg-X-GrYOsuHkDOe1RnbmHIkdhIXOj2ksjC8UGV6eTVlaW6s_z3Gsc7yvzJn8MBSAbhCFCOVvjCc5oT4Z2L6mbPUmICcCTtHwZKlRTqVXPosKF3PPc_Ry4tHwm2-3skKtxDbpuPWTZ08drshT9hF9kQy_piCd/s320/241125518_1784410841761509_6286138805997061295_n.png", "alt": "Aluno Certificado 4", "name": "Aluno 4" },
            { "url": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb34Wn4uQyP0xnfpV26Dt3h7MNrt7gG1xY_UMu8cdZM_qu_6Srv4YuzONDgDuFGoO5tFl_BtO7Ym3LhAOg2Hj7CKx-El6Eq9dtujZGTKwIIOJoywTP9FfHMtJysFd2hrfk5UAajSeEK4KXx4FQmxtp_QWlMSqJnbTU5PUYYxYfRubosDBc3rgOyGTgcXmH/s320/263157366_1854473894755203_7527797874285405332_n.png", "alt": "Aluno Certificado 5", "name": "Aluno 5" },
            { "url": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic6RmVn_LUZqgXwbWPlvPOD7f9-JcSf_cBzpSvL59qqha1PABVVuvhhDHBpBhRnohSo5A270CalQ6sdu1CXKGEX5r3b4wseSGa1IBEDimIh7IJP78a_k4BLy95e3mJxS_ehkrOIsB3oX9YSzHykKGHorRZPXtl9ZxVBCPjFmCqv_0PqNJ5N_b_uYW5jllK/s320/269631978_1865794630289796_3574223064864309606_n.png", "alt": "Aluno Certificado 6", "name": "Aluno 6" },
            { "url": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv5LRYbSwMk2eNBH9Umwn1XgzU8LvUeHntVx3s86O4TeoNaAst6fuP1oEjxkkoyUXPfy8wVdoXRgLx7pXYdFBrECSZC4kBQvDDxee-t0uEmkTzoqK3OkzylS0dVclMTvTg_53CQDvzVl6gskyar2z8jNtd5VBZqZO2TfSGHi_G7wDwdJyW5UEq8SdtCbfI/s320/271930738_1886111864924739_6534898989639565013_n.png", "alt": "Aluno Certificado 7", "name": "Aluno 7" },
            { "url": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirfcUze51SISQqC58fMG34XFkGI0F7OSKLVvsazmICLyUUt9tbOj35FU2_kUYfwtLkMnuvknE6gvSJ2Wu6U7ai3M2DbbE4CCp02w9Hcly9SuZwxmJRd1yKFgyQowzU1f2z-jctafQjw9jUJnM-kHBhcwxM8XPEC3d_bnx_vjqe5ofSfrPBUEDpX0QSWZp6/s320/285250067_1987717874764137_4956223538573866604_n.png", "alt": "Aluno Certificado 8", "name": "Aluno 8" },
            { "url": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7vMDzTF7DbCwuHRLzYmWJvs9lbm8q7nz8XLSf7Rp-48qUbLEdABwdgOwfP29fpxm3UpzqFp6HRW-ObacWZpt7-ZmyDnyITg9Rx9G9MlV33H-QpgetGMhvWjfMe7vwGLOA9zoeCjhqOL3q8BGD6ai_a2VtsQPabD9lOBS15jqLosd99J6DsI0sbFSKAv3T/s320/297028959_2037303449805579_6557635471264391450_n.jpg", "alt": "Aluno Certificado 9", "name": "Aluno 9" },
            { "url": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4HiX2nqWXIOqHfHIl7wvDCKQyl3ujO8vkEfphlLrfjgGfohZSsyNoH3cYp8oTB0M4XOmDj8AT68qdzy2N1YX2GOltAwgVJUE31sFWWia9H-qqfo4N-ri5TybqTb2T00FmBTMLjr9fkk_madYH6Xy694LsSfgZhhUKH4hGM0G-t_E4T4rFWOqUKor4I3fs/s320/321998900_512149707758839_1231752187499853370_n.jpg", "alt": "Aluno Certificado 10", "name": "Aluno 10" },
            { "url": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSRlK9ndRrDz0eSYtBrFX_fjFrqxhCiTlWFDmFxtnJJ1RcSariJHGR8M5EH0aAqdf0Lss_Ha_apEsEE-LoVj5Kq5AwQExFUgntoBDqPn9_njK2hd3ndVDUtdz4r5QyVeFDTYH0W1QffpS44uNWATjrWqIVKYjIZ_40iTZfws11I4hBgT5JQX7uOkMnxn2f/s320/329036211_741288094201795_8543289195202883627_n.jpg", "alt": "Aluno Certificado 11", "name": "Aluno 11" },
            { "url": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj68umKkOwKYrTXIjMsEuBtY4WAu6kJiiYJ3-LhPu7FkxGl82R16E2loPVN-ZDfor5wfDfWuahrlqlsA2h2lasT1-Co2sEvu9iGzLVOH9sL62LNbLzSmrtnnB9zniepB4oCFMc_LWrXjUjCkYHQbsef_QIUYR2SrDyrj7XAt2OtuebQbhx6BLH6WAuJih8m/s320/334934658_891993081870179_8203524346978669702_n.jpg", "alt": "Aluno Certificado 12", "name": "Aluno 12" },
            { "url": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifIsCsrpfiuZzLehO_gcgLnItnwD8mmFWzIQgdtnYTUIOlqA7xNflAbqa2RkZstmHMSt0kPViCjcexZnda1ib_gWR8U1mgl40rQWHOR7V06cbALnMA6vnO9EzbfKsZx8siQj098tEjZpBTS2WRoGq0T6TJg8NHGPb0pcuOnf-BIKUNoTmk2V1GYmCzn9tZ/s320/335466957_562721512495637_5761563971887260630_n.jpg", "alt": "Aluno Certificado 13", "name": "Aluno 13" },
            { "url": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJfANIisTxJ9f_1hZbu1L0lSamrz1U3-l18KMtTUbT38zP0VkLmTsmYJrursne3bJmytG-KlHJf4AAAbQcHEjQBB4UI3Lp8YLTTF06YJFGxhs6nI-1TykrtbkCZuTas4poZds0Vu7am_u9Ow0ntO8OcOnKsBbjvtdvMWJQq8RRNM5db5fGhRSCFlbcdxj-/s320/338379132_163313329950578_4139741011814667776_n.jpg", "alt": "Aluno Certificado 14", "name": "Aluno 14" },
            { "url": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWS7UmgBNeRq4ErE8w_XurtisNhFt_9AsmV8PB6DQfS6JGJkksmchxtKr_VCbof8tvgcLEaB1cjIEnKxxCyYrHoCSjOIJkTsHNpZqUrG6OIEdSwgtBH_VEEGJAD5fbf9FAgc7JVP9Ms1CpNAotJCiLjpz1uLeMruEFDXrjsLib0T8kepPlc6mLSM9QMhd4/s320/341038565_267016089005342_8577705853534920227_n.jpg", "alt": "Aluno Certificado 15", "name": "Aluno 15" },
            { "url": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH2LwTErc650c5Kkcq6fYmscoeliMl1evSuWxjP_nZV3q1keoCiQkJIMzR_tnTShtMtlDTjzn1VuH0F1nwxh1UmvVzQ9gkndk6YL48vROlzfVi-2IpaXy2jiJusD7ueo1ZKhDSidm0pXfKTCg9x8j_aMUf8m0gLa16Xg37CRWY64H3LEExV_3OmGzLETWF/s320/344868473_195043989596424_4766252009966505164_n.jpg", "alt": "Aluno Certificado 16", "name": "Aluno 16" },
            { "url": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkpfxnndHzcstmsOeYMZpNsp-4kCfWcF0nAlnFYqllMsoieF64scrZj6G0kQgpcW8gh5tSdo2w70YQCHFPmsUlPCI5pw9oEjn2oMwRcaBOq7PHq-wpDKcQDg3Cl7k4D-yIFmHZ7M2u0PqVXiY_XJtwculWna7PKpv6ICN9u2aPQijNI1oo-Wer8cSPilhX/s320/345600382_237872055589407_3111507490793414569_n.jpg", "alt": "Aluno Certificado 17", "name": "Aluno 17" },
            { "url": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-KAdv5hNrp5aZ5KrwRzkXme47eHSvSpe_BSpWEFzHIFvX-meTTya4ogpvu5Lz_uKAtIbU1cim3GWmJ6cBsDTo4Yc_w0oJHFLTf9LsJMDoDsqtxdj-z4hapsgg6pShOFD0ejxHVp9kwAtxBISZt-BQoWPauwC59kvGwstjKzUR2-gIi3Nczu2qmcJkmPn0/s16000/natalia%20ce0rtificado.png", "alt": "Aluno Certificado 18", "name": "Aluno 18" },
            { "url": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9ykIFYvYchkqlCCqEPzj0xRiIwuydNdePpCxtKrtLXtUdsd179dcCwUOaqEI6z5zczljPMs4VORJW5oJPdCG0JtcCoJW2XkA8gMp3YTXqxGGopUvUaeXeTyrwyZomW5gfcpTSIOVu6sxLwMh1wwYG_5u5ZWg0s2tIH1Bnt5_ij4eAEVOUl_X7p_p1Lnx-/s320/349939991_802199764376305_1412740496954589898_n.jpg", "alt": "Aluno Certificado 19", "name": "Aluno 19" },
            { "url": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7NhPBb1OsQ_9HL5b9-5Kq29elR6IvYiz3ItjMDev32lDveLBmWl6zQuW6ER7skbApBHa64Ey6gH8ze-6hS6LZMYrBmZaIY2LgvbQODbCD7LxoZaDIwrhQ88bGRs_RO8soGOV6ioD9hxuuE4Hyi71XkrBNQEFvMjQ3mksU-XqVU0hdRURhRv2-Yt8e7b-4/s320/356631170_688743969930110_1494475357369451748_n.jpg", "alt": "Aluno Certificado 20", "name": "Aluno 20" },
            { "url": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVzMrU-9rjPEqF54djxDTNR68hPE_XndSRhAT7t4bKoEtdohcX-ISkCvB9PE74EqpQSuJETMrOS3sNaj-pXPG88KrMicMdtki3PMhm_ah9ApUm_JZ1RMxYME_8o9iPyx-LrcMQWumn1VelaikdQ9b8Z6KjYLPavjVgBdeGlOmiWFzez54B2jOy32WkvB_3/s320/357730696_693324276138746_3163651717739669992_n.jpg", "alt": "Aluno Certificado 21", "name": "Aluno 21" },
            { "url": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFfaVymIiWwdraoW8Y_nvfVe3R5luZJEXeG5o8FoQJLLRs0AemAuWHNc2vhD-4N-JZf236nqFJDHAgJNUzPAQjyWZfLa7Xh079F4De44jgrAjMlNwg3vYhIlHfNgLHsPpWPQKSZq6Eb8UVRZ7G0-2x5NTS-ilxEso2YsSrSkBi8JXZhhC0-IPQnyL69_9Y/s320/358562506_693324109472096_2515242847646294540_n.jpg", "alt": "Aluno Certificado 22", "name": "Aluno 22" },
            { "url": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYObqgIvlWfwW800bIuIyCHacxiADZaS7IsYPv8X6ICnVKIhyIlDW70pwk2fLQi6RCoYn2N4ZKCELJ6Fibu8_8LiRUt24LGeP4MLm2PQtxOVmU5mskg9ofo0YSEG4noIdT1DuOaJ7LSDaucXTszsHQ50VEcxNnO-QzNaHTwCazjd3GarpBGRFVQhjCu2in/s1600/walace%20recebendo%20certificado%20inova%20cursos.png", "alt": "Aluno Certificado 23", "name": "Aluno 23" },
            { "url": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLLEqf0tZs6ydITKcPdSMOC3-0Wc7PTGccNn13G_Gzp-h13ujeYNooeOs4Rb069JoVwWH2A3rdwYtw41zO2_8lVU2cG9wi5WwYE54xF6cjga8CoBLZb5xS349iH_7McR8BzX_hACN5TdOWrmOW6d54h9UQVuTegDR8FdcDDl3DPh2yFwCwvAAEQbX2wNfr/s320/cert.jpg", "alt": "Aluno Certificado 24", "name": "Aluno 24" }
        ];

const wrapper = document.querySelector("#inova-certificado-wrapper");
        if (!wrapper) return;

const slider_id = wrapper.querySelector("#hcg-slider-1");
        if (!slider_id) return;

let slide_index = 0;
        let isAutoPlay = true;
        let autoSlideInterval = null;

const sliderBody = slider_id.querySelector(".hcg-slider-body");
        const dotControl = slider_id.querySelector(".hcg-slide-dot-control");
        const photosGrid = wrapper.querySelector("#photos-grid");

let dots_html = "";
        let slides_html = "";
        let grid_html = "";

images_list.forEach((item, i) => {
            slides_html += `
                <div class="hcg-slides fade-in hidden w-full h-full flex-col items-center justify-center p-2 text-center group cursor-pointer" data-slide-id="${i}" onclick="openModal('${item.url}', '${item.alt}')">
                    <span class="absolute top-3 left-3 bg-slate-900/80 text-white text-[11px] font-semibold px-2.5 py-1 rounded-md border border-white/10 backdrop-blur-sm z-10">
                        ${i + 1} / ${images_list.length}
                    </span>
                    <div class="relative max-h-[280px] sm:max-h-[380px] overflow-hidden rounded-lg">
                        <img src="${item.url}" alt="${item.alt}" 
                             class="max-h-[280px] sm:max-h-[380px] w-auto max-w-full object-contain rounded-lg shadow-xl group-hover:scale-105 transition-transform duration-300" 
                             onerror="this.src='https://placehold.co/320x320/1e293b/ffffff?text=Aluno+${i+1}'" />
                    </div>
                    ${item.name ? `<span class="mt-2 text-white text-xs font-medium bg-slate-800/80 px-3 py-1 rounded-full">${item.name}</span>` : ''}
                </div>
            `;

dots_html += `
                <button aria-label="Ir para imagem ${i+1}" class="hcg-slide-dot w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-slate-600 hover:bg-blue-400 transition-all shrink-0" data-id="${i}"></button>
            `;

grid_html += `
                <div class="group bg-slate-100 rounded-xl overflow-hidden border border-slate-200 cursor-pointer hover:shadow-md transition-all p-1.5" onclick="openModal('${item.url}', '${item.alt}')">
                    <div class="aspect-square bg-slate-200 rounded-lg overflow-hidden relative">
                        <img src="${item.url}" alt="${item.alt}" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300" loading="lazy" onerror="this.src='https://placehold.co/320x320/cbd5e1/475569?text=Aluno+${i+1}'" />
                        <div class="absolute inset-0 bg-slate-900/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                            <i class="fa-solid fa-magnifying-glass-plus text-white text-base"></i>
                        </div>
                    </div>
                    <p class="text-[11px] text-center font-semibold text-slate-700 mt-1.5 truncate">Aluno ${i+1}</p>
                </div>
            `;
        });

sliderBody.innerHTML = slides_html;
        dotControl.innerHTML = dots_html;
        if(photosGrid) photosGrid.innerHTML = grid_html;

const slides = slider_id.querySelectorAll(".hcg-slides");
        const dots = slider_id.querySelectorAll(".hcg-slide-dot");
        const prev_button = slider_id.querySelector("#hcg-slide-prev");
        const next_button = slider_id.querySelector("#hcg-slide-next");

const showSlides = () => {
            if (slide_index >= slides.length) slide_index = 0;
            if (slide_index < 0) slide_index = slides.length - 1;

slides.forEach((slide, idx) => {
                if (idx === slide_index) {
                    slide.classList.remove("hidden");
                    slide.classList.add("slide-active");
                } else {
                    slide.classList.add("hidden");
                    slide.classList.remove("slide-active");
                }
            });

dots.forEach((dot, idx) => {
                if (idx === slide_index) {
                    dot.classList.add("bg-blue-500", "w-6");
                    dot.classList.remove("bg-slate-600");
                } else {
                    dot.classList.remove("bg-blue-500", "w-6");
                    dot.classList.add("bg-slate-600");
                }
            });
        };

prev_button.addEventListener("click", e => {
            e.preventDefault();
            slide_index--;
            showSlides();
        });

next_button.addEventListener("click", e => {
            e.preventDefault();
            slide_index++;
            showSlides();
        });

dots.forEach(dot => {
            dot.addEventListener("click", e => {
                e.preventDefault();
                slide_index = parseInt(e.target.dataset.id);
                showSlides();
            });
        });

const startAutoPlay = () => {
            if (autoSlideInterval) clearInterval(autoSlideInterval);
            autoSlideInterval = setInterval(() => {
                slide_index++;
                showSlides();
            }, 4500);
        };

const stopAutoPlay = () => {
            if (autoSlideInterval) clearInterval(autoSlideInterval);
        };

slider_id.addEventListener('mouseenter', stopAutoPlay);
        slider_id.addEventListener('mouseleave', () => { if(isAutoPlay) startAutoPlay(); });

showSlides();
        startAutoPlay();

window.toggleGalleryView = (mode) => {
            const carouselContainer = document.getElementById("hcg-slider-1");
            const gridContainer = document.getElementById("grid-gallery-container");
            const carouselBtn = document.getElementById("view-carousel-btn");
            const gridBtn = document.getElementById("view-grid-btn");

if (mode === 'grid') {
                carouselContainer.classList.add("hidden");
                gridContainer.classList.remove("hidden");
                gridBtn.className = "px-3 py-1.5 rounded-lg text-xs font-semibold bg-white text-slate-800 shadow-sm transition-all flex items-center gap-1.5";
                carouselBtn.className = "px-3 py-1.5 rounded-lg text-xs font-semibold text-slate-600 hover:text-slate-900 transition-all flex items-center gap-1.5";
                stopAutoPlay();
            } else {
                gridContainer.classList.add("hidden");
                carouselContainer.classList.remove("hidden");
                carouselBtn.className = "px-3 py-1.5 rounded-lg text-xs font-semibold bg-white text-slate-800 shadow-sm transition-all flex items-center gap-1.5";
                gridBtn.className = "px-3 py-1.5 rounded-lg text-xs font-semibold text-slate-600 hover:text-slate-900 transition-all flex items-center gap-1.5";
                if(isAutoPlay) startAutoPlay();
            }
        };
    })();

// Funções Globais do Modal
    window.openModal = function(imgUrl, captionText) {
        const modal = document.getElementById("image-modal");
        const modalImg = document.getElementById("modal-img");
        const modalCaption = document.getElementById("modal-caption");

modalImg.src = imgUrl;
        modalCaption.textContent = captionText || "";
        modal.classList.remove("hidden");
        modal.classList.add("flex");
        document.body.style.overflow = "hidden";
    }

window.closeModal = function() {
        const modal = document.getElementById("image-modal");
        modal.classList.add("hidden");
        modal.classList.remove("flex");
        document.body.style.overflow = "auto";
    }

document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') closeModal();
    });
    </script>
</body>
</html>

Sobre nosso certificado

Siga a escola:

Pesquise aqui o que você precisa

Sobre a INOVA

Siga-nos

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

Contact form