TESTE 2026 | SECTI - Secretaria de Ciência, Tecnologia e Inovação

Publicado: 03/03/2026 Última atualização: 03/03/2026 às 11:26

<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Rede BAH.IA — Materiais e Portal Educacional</title>
<meta name="description" content="Portal educacional da Rede BAH.IA: módulos, aulas e recursos em PPTX/DOCX, com orientações de uso e termo de licença." />

<style>
:root{
/* Base (claro, como o ba.gov.br) */
--bg: #ffffff;
--text: #0f172a; /* texto principal (escuro) */
--muted: #475569; /* texto secundário */
--line: rgba(15, 23, 42, .12);

/* Cards e superfícies */
--card: #ffffff;
--card2: #f8fafc; /* leve cinza */
--shadow: 0 10px 30px rgba(2, 6, 23, .10);

/* Destaques (azul do site) */
--accent: #0b5fa5; /* azul principal (ajuste fino se quiser) */
--accent2: #0b5fa5; /* pode manter igual ao azul para padronizar */
--ok: #16a34a;
--warn: #d97706;

--radius: 18px;
--radius2: 26px;
--max: 1120px;
--pad: 18px;
}

.text-justify{
text-align: justify;
text-justify: inter-word; /* melhora o espaçamento */
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0;
background: var(--bg);
color: var(--text);
font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
a{ color:inherit; }
.container{ max-width: var(--max); margin:0 auto; padding: 0 var(--pad); }
.sr-only{
position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Skip link */
.skip{ position:absolute; left:-999px; top:12px; background:#fff; color:#000; padding:10px 12px; border-radius:12px; z-index:9999; }
.skip:focus{ left:12px; outline: 3px solid #000; }

/* Header */
header{
position: sticky;
top:0;
z-index:100;
background: #ffffff;
border-bottom: 1px solid var(--line);
}
.topbar{
display:flex; align-items:center; justify-content:space-between; gap:14px;
padding: 14px 0;
}
.brand{
display:flex; align-items:center; gap:12px; min-width: 220px;
}
.brand img{ height:42px; width:auto; display:block; }
.brand .title{
display:flex; flex-direction:column; line-height:1.05;
}
.brand .title strong{ font-size:14px; letter-spacing:.3px; }
.brand .title span{ font-size:12px; color:var(--muted); }

nav ul{ list-style:none; display:flex; gap:14px; padding:0; margin:0; flex-wrap:wrap; justify-content:flex-end; }
nav a{
text-decoration:none;
color: var(--muted);
font-size: 13px;
padding:10px 10px;
border-radius: 999px;
border: 1px solid transparent;
transition: .2s ease;
}
nav a:hover, nav a:focus{
color: var(--text);
border-color: var(--line);
outline:none;
background: rgba(255,255,255,.05);
}

/* Hero */
.hero{
padding: 28px 0 10px;
}
.heroCard{
border: 1px solid var(--line);
background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
border-radius: var(--radius2);
box-shadow: var(--shadow);
overflow:hidden;
position:relative;
}
.heroMedia{
min-height: 260px;
background:
radial-gradient(900px 300px at 40% 10%, rgba(59,130,246,.28), transparent 55%),
radial-gradient(900px 300px at 70% 40%, rgba(239,68,68,.22), transparent 55%),
url("assets/Banner-BAH.IA.svg");
background-size: cover;
background-position: center;
border-bottom: 1px solid var(--line);
}
.heroBody{
display:grid;
grid-template-columns: 1.2fr .8fr;
gap: 18px;
padding: 18px;
}
@media (max-width: 900px){
.heroBody{ grid-template-columns: 1fr; }
.brand .title{ display:none; }
}

.heroBody h1{
margin:0;
font-size: clamp(22px, 3.2vw, 34px);
letter-spacing: -.3px;
}
.heroBody p{ margin:10px 0 0; color: var(--muted); line-height:1.5; }
.ctaRow{
display:flex; flex-wrap:wrap; gap:10px; margin-top: 14px;
}

.heroBodyLine{
gap: 18px;
padding: 18px;
}

.heroBodyLine h1{
margin:0;
font-size: clamp(22px, 3.2vw, 34px);
letter-spacing: -.3px;
}
.heroBodyLine p{ margin:10px 0 0; color: var(--muted); line-height:1.5; }
.ctaRow{
display:flex; flex-wrap:wrap; gap:10px; margin-top: 14px;
}

.btn{
display:inline-flex; align-items:center; justify-content:center; gap:10px;
border-radius: 999px;
padding: 10px 14px;
text-decoration:none;
border: 1px solid var(--line);
background: rgba(255,255,255,.06);
color: var(--text);
font-weight: 600;
font-size: 13px;
cursor:pointer;
transition: .2s ease;
}
.btn:hover{ background: rgba(255,255,255,.10); transform: translateY(-1px); }
.btn.primary{ border-color: rgba(11, 95, 165, .55);
background: rgba(11, 95, 165, .12);
color: var(--text); }
.btn.primary:hover{ background: rgba(11, 95, 165, .18); }
.btn.danger{ border-color: rgba(239,68,68,.55); background: rgba(239,68,68,.16); }
.btn.danger:hover{ background: rgba(239,68,68,.22); }
.pill{
display:inline-flex; align-items:center; gap:8px;
padding: 7px 10px;
border-radius: 999px;
border: 1px solid var(--line);
background: rgba(255,255,255,.05);
color: var(--muted);
font-size: 12px;
}
.pill strong{ color: var(--text); font-weight:700; }

/* Sections */
section{ padding: 28px 0; }
.sectionHead{
display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
margin-bottom: 14px;
}
.sectionHead h2{ margin:0; font-size: 20px; letter-spacing:-.2px; }
.sectionHead p{ margin:0; color: var(--muted); font-size: 13px; line-height:1.4; max-width: 780px; }

.grid2{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 900px){ .grid2{ grid-template-columns: 1fr; } }

.card{
border: 1px solid var(--line);
background: rgba(255,255,255,.04);
border-radius: var(--radius);
padding: 14px;
}
.card h3{ margin:0 0 6px; font-size: 15px; }
.card p{ margin:0; color: var(--muted); font-size: 13px; line-height:1.5; }

/* Search + modules */
.toolbar{
display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between;
margin: 10px 0 14px;
}
.search{
display:flex; align-items:center; gap:10px; flex: 1;
border: 1px solid var(--line);
border-radius: 999px;
padding: 10px 12px;
background: rgba(255,255,255,.04);
min-width: 260px;
}
.search input{
width:100%;
border:0;
outline:none;
background:transparent;
color: var(--text);
font-size: 13px;
}
.search input::placeholder{ color: rgba(255,255,255,.55); }

.smallNote{ color: var(--muted); font-size: 12px; }

.modules{
display:grid;
grid-template-columns: repeat(12, 1fr);
gap: 12px;
}
.moduleCard{
grid-column: span 12;
border: 1px solid var(--line);
background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
border-radius: var(--radius);
overflow:hidden;
}
@media (max-width: 900px){ .moduleCard{ grid-column: span 12; } }

.moduleHeader{
padding: 14px;
display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
border-bottom: 1px solid var(--line);
}
.moduleHeader h3{ margin:0; font-size: 15px; }
.moduleHeader .meta{ color: var(--muted); font-size: 12px; margin-top: 2px; }
.tagRow{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:flex-end; }
.tag{
font-size: 11px;
padding: 6px 8px;
border-radius: 999px;
border: 1px solid var(--line);
background: rgba(255,255,255,.05);
color: var(--muted);
white-space:nowrap;
}

details{ padding: 0; }
details summary{
cursor:pointer;
list-style:none;
padding: 12px 14px;
display:flex; align-items:center; justify-content:space-between;
gap: 10px;
user-select:none;
}
details summary::-webkit-details-marker{ display:none; }
.summaryLeft{
display:flex; flex-direction:column;
}
.summaryLeft strong{ font-size: 13px; }
.summaryLeft span{ color: var(--muted); font-size: 12px; margin-top:2px; }

.lessonList{ padding: 0 14px 14px; display:grid; gap: 10px; }
.lesson{
border: 1px solid var(--line);
border-radius: 14px;
background: rgba(0,0,0,.18);
padding: 10px 10px;
display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
}
.lesson .info{ display:flex; flex-direction:column; gap:2px; }
.lesson .info strong{ font-size: 13px; }
.lesson .info span{ font-size: 12px; color: var(--muted); }
.lesson .actions{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.btnSm{
padding: 8px 10px;
border-radius: 999px;
border: 1px solid var(--line);
background: rgba(255,255,255,.06);
color: var(--text);
font-size: 12px;
font-weight: 700;
text-decoration:none;
cursor:pointer;
transition:.2s ease;
}
.btnSm:hover{ background: rgba(255,255,255,.10); transform: translateY(-1px); }
.btnSm.ppt{ border-color: rgba(59,130,246,.55); }
.btnSm.doc{ border-color: rgba(239,68,68,.55); }
.btnSm.pdf{ border-color: rgba(245,158,11,.55); }
.btnSm.zip{ border-color: rgba(34,197,94,.55); }

/* Downloads */
.downloadGrid{ display:grid; grid-template-columns: repeat(12,1fr); gap:12px; }
.downloadGrid .card{ grid-column: span 6; }
@media(max-width:900px){ .downloadGrid .card{ grid-column: span 12; } }
.list{ margin:10px 0 0; padding-left: 18px; color: var(--muted); font-size: 13px; line-height:1.5; }
.list li{ margin: 6px 0; }

/* Modal */
.modalBackdrop{
position: fixed; inset:0;
background: rgba(0,0,0,.55);
display:none;
align-items:center; justify-content:center;
padding: 18px;
z-index: 999;
}
.modal{
width: min(720px, 100%);
border: 1px solid var(--line);
background: rgba(11,16,32,.92);
border-radius: 22px;
box-shadow: var(--shadow);
overflow:hidden;
}
.modalHead{
padding: 14px 16px;
border-bottom: 1px solid var(--line);
display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.modalHead strong{ font-size: 14px; }
.x{
border: 1px solid var(--line);
background: rgba(255,255,255,.06);
color: var(--text);
border-radius: 12px;
padding: 8px 10px;
cursor:pointer;
}
.modalBody{ padding: 14px 16px; }
.modalBody p{ margin:0 0 10px; color: var(--muted); font-size: 13px; line-height:1.5; }
.termBox{
border: 1px solid var(--line);
background: rgba(255,255,255,.04);
border-radius: 14px;
padding: 12px;
max-height: 220px;
overflow:auto;
color: rgba(255,255,255,.78);
font-size: 13px;
line-height:1.5;
}
.modalFoot{
padding: 12px 16px;
border-top: 1px solid var(--line);
display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between;
}
.checkRow{ display:flex; align-items:flex-start; gap:10px; color: var(--muted); font-size: 13px; }
.checkRow input{ margin-top: 3px; }
.modalFoot .btn{ padding: 10px 14px; }
.hint{ font-size: 12px; color: var(--muted); }

/* Footer */
footer{
padding: 26px 0 40px;
border-top: 1px solid var(--line);
background: rgba(0,0,0,.12);
}
.foot{
display:flex; flex-wrap:wrap; gap:14px;
align-items:flex-start; justify-content:space-between;
}
.foot p{ margin:0; color: var(--muted); font-size: 12px; line-height:1.5; max-width: 760px; }
.foot .miniLinks{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.foot .miniLinks a{ color: var(--muted); text-decoration:none; border-bottom:1px dashed rgba(255,255,255,.25); }
.foot .miniLinks a:hover{ color: var(--text); }

/* Focus */
:focus-visible{ outline: 2px solid rgba(59,130,246,.9); outline-offset: 2px; border-radius: 10px; }
</style>
</head>

<body>
<a class="skip" href="#main">Pular para o conteúdo principal</a>

<header>
<div class="container">
<div class="topbar">
<div class="brand">
<img src="/secti/assets/logo_fundo_transparente.png" alt="Logo da Rede BAH.IA" />
<div class="title">
<strong>Rede BAH.IA</strong>
<span>Portal educacional e materiais</span>
</div>
</div>

<nav aria-label="Navegação principal">
<ul>
<li><a href="#sobre">Sobre</a></li>
<li><a href="#como-usar">Como usar</a></li>
<li><a href="#modulos">Módulos e aulas</a></li>
<li><a href="#downloads">Downloads</a></li>
<li><a href="#contato">Contato</a></li>
</ul>
</nav>
</div>
</div>
</header>

<main id="main">
<section class="hero">
<div class="container">
<div class="heroCard">
<div class="heroMedia" role="img" aria-label="Banner da Rede BAH.IA"></div>
<div class="heroBody">
<div class="text-justify">
<p>
Este portal reúne os materiais da Rede BAH.IA, uma iniciativa colaborativa de instituições baianas voltada à produção de <b>conteúdos educacionais gratuitos sobre Inteligência Artificial</b>.</p>
<p>
Os materiais são organizados em módulos e podem ser usados de forma <b>flexível e adaptável</b>, apoiando o trabalho docente em diferentes níveis de ensino.</p>
<p>
A proposta do BAH.IA valoriza a <b>contextualização regional, a inclusão e a diversidade</b>, aproximando a Inteligência Artificial da realidade educacional da Bahia.</p>

<div class="ctaRow">
<a class="btn primary" href="#modulos">Acessar módulos</a>
<button class="btn danger" type="button" data-download="https://drive.google.com/file/d/11zT1qfBrmAQ_CtgI_wwBtOrEuR8T6taU/view?…">
Baixar pacote completo (ZIP)
</button>
<a class="btn primary" href="#como-usar">Como usar o material</a>
</div>

</div>

<div class="card" style="height:fit-content;">
<h3 style="margin:0 0 8px;">Acesso rápido</h3>
<p style="margin:0 0 10px;">
Use a busca abaixo para localizar rapidamente uma aula por tema, módulo ou palavra-chave.
</p>
<div class="search" role="search" aria-label="Buscar conteúdo">
<span aria-hidden="true">🔎</span>
<input id="q" type="search" placeholder="Ex.: 'Ética', 'PLN', 'Aprendizado supervisionado'..." />
</div>
<p class="smallNote" style="margin-top:10px;">
Dica: você pode baixar os materiais por aula (PPTX/DOCX) ou por módulo (ZIP).
</p>
</div>
</div>
</div>
</div>
</section>

<section id="sobre">
<div class="container">
<div class="heroCard">
<div class="heroBodyLine">
<h2>Sobre o portal</h2>
<p class="text-justify">
Este portal consolida a Rede BAH.IA, que reúne professores, pesquisadores e estudantes de sete instituições baianas para produzir e organizar materiais didáticos gratuitos sobre Inteligência Artificial.
</p>
<p class="text-justify">
Os materiais produzidos foram pensados para facilitar o acesso, a navegação e o uso em sala de aula. Os conteúdos são organizados em módulos, o que permite que cada professor use o material de forma flexível, sem precisar seguir uma ordem fixa.
</p>
<p class="text-justify">
A identidade visual dos materiais segue princípios que orientam toda a proposta da Rede BAH.IA: regionalização, inclusão, diversidade, personalização do ensino e proximidade com professores e estudantes, além de manter coerência com a identidade do Estado da Bahia. Esses princípios guiam o uso de cores, personagens, ícones, ilustrações e exemplos presentes nos slides e recursos educacionais.
</p>
<p class="text-justify">
Os elementos visuais foram inspirados na cultura baiana para aproximar os conteúdos da realidade dos estudantes e fortalecer o sentimento de pertencimento, como uma forma de contextualizar o ensino, sem favorecer nenhum grupo específico.
</p>

<br />

<div >
<div class="card">
<h3>O que você encontra aqui</h3>
<p>
Módulos e aulas com <strong>slides editáveis (PPTX)</strong>, <strong>planos de aula (DOCX)</strong>
e PDFs para consulta rápida.
</p>
<ul class="list">
<li>Materiais por aula e por módulo</li>
<li>Orientações de uso e dependências entre módulos</li>
<li>Termo de uso para manter integridade e atribuição</li>
</ul>
</div>
<br />
<div class="card">
<h3>Para quem é</h3>
<p>
Educadores, gestores e pessoas interessadas em aprender e aplicar conceitos de IA na educação.
O conteúdo foi desenhado para adaptação conforme o contexto e o nível da turma.
</p>
<ul class="list">
<li>Ensino médio e técnico (uso sugerido)</li>
<li>Formação continuada de docentes</li>
<li>Uso institucional/educacional</li>
</ul>
</div>
</div>
</div>

</div>
</div>

</section>

<section id="como-usar">
<div class="container">
<div class="heroCard">
<div class="heroBodyLine">
<h2>Como usar o material</h2>
<p class="text-justify">
O material apresenta uma organização conceitual progressiva, do Módulo 1 (M1) ao Módulo 7 (M7), mas admite conexões entre módulos, permitindo ajustes ao nível e ao contexto da turma, bem como a definição de diferentes trilhas de aprendizagem, conforme sugerido a seguir.
</p>

<br />
<div >
<div class="card">
<h3>Trilhas sugeridas</h3>
<ul class="list">
<li><strong>Trilha essencial (rápida):</strong> M1 → M2 → M3 → M7</li>
<li><strong>Trilha completa:</strong> M1 → M2 → M3 → M4 → M5 → M6 → M7</li>
<li><strong>Trilha ética e cidadania digital:</strong> M1 → M3 → M4 (opcional: M7)</li>
</ul>
<p class="text-justify">
Você pode iniciar pelos módulos que preferir, desde que respeite os pré-requisitos (por exemplo, os Módulos 5 (M5) e 7 (M7) dependem dos Módulos 1 (M1) e 3 (M3)). A estrutura geral, as dependências entre módulos e também o alinhamento com a Base Nacional Comum Curricular (BNCC) estão detalhados no link “Como usar o material”.
</p>
<p class="text-justify" style="margin-top:10px; color:var(--muted); font-size:13px; line-height:1.5;">
Nesse link, cada módulo é associado às competências da BNCC. Por exemplo, o Módulo 1 está ligado às competências que possuem foco em pensamento científico e cultura digital, enquanto o Módulo 4 se conecta às competências voltadas à cidadania digital e responsabilidade.
</p>
</div>
<br />
<div class="card">
<h3>Boas práticas em sala</h3>
<ul class="list">
<li>Use os <strong>PPTX</strong> para adaptar linguagem, exemplos e duração.</li>
<li>Consulte o plano de aula em <strong>DOCX</strong> para ver os objetivos e atividades e adaptá-los conforme sua necessidade.</li>
<li>Se for reutilizar/redistribuir, mantenha <strong>créditos</strong> e cite a origem (Rede BAH.IA).</li>
</ul>
<p class="text-justify">
O portal não exige cadastro nem realiza coleta obrigatória de dados pessoais. No entanto, para acessar e utilizar os materiais, é necessário aceitar um termo de uso que assegura a integridade, a correta distribuição e o uso responsável do conteúdo. O descumprimento dessas regras pode resultar em penalidades previstas no próprio termo.
</p>
</div>
</div>
</div>
</div>
</div>
</section>

<section id="modulos">
<div class="container">
<div class="heroCard">
<div class="heroBodyLine text-justify">
<div>
<h2>Módulos e aulas</h2>
<p class="text-justify">
Clique em um módulo para ver as aulas. Cada aula pode ter: <strong>PPTX</strong> (slides editáveis), <strong>DOCX</strong> (plano de aula) e <strong>PDF</strong> (visualização).
</p>
</div>

<div class="toolbar">
<div class="smallNote" id="resultNote">Mostrando todos os módulos.</div>
<div class="smallNote">Precisa de algo específico? Use a busca no topo.</div>
</div>

<section id="downloads">
<div class="container">
<div class="heroCard">
<div class="heroBodyLine text-justify">
<div>
<h2>Recursos para download</h2>
<p>
Para preservar a integridade do conteúdo e garantir a atribuição, os downloads exibem um termo de responsabilidade de uso antes do arquivo ser disponibilizado.
</p>
</div>

<br />
<div>
<div class="card">
<h3>Pacote completo</h3>
<p>Baixe todos os módulos e recursos em um único arquivo.</p>
<div class="ctaRow">
<button class="btn danger" type="button" data-download="https://drive.google.com/file/d/11zT1qfBrmAQ_CtgI_wwBtOrEuR8T6taU/view?…">
Baixar pacote completo (ZIP)
</button>
</div>
<p class="smallNote" style="margin-top:10px;">
Sugestão: mantenha o “versão/data” do pacote no nome do arquivo.
</p>
</div>
<br />
<div class="card">
<h3>Licença e uso correto</h3>
<p>O material pode ser usado e adaptado para fins educacionais, com atribuição e preservação de créditos.</p>
<ul class="list">
<li>Mantenha a referência: “Rede BAH.IA – Governo do Estado da Bahia / SECTI”.</li>
<li>Não remova marcas/logos e não atribua autoria indevida.</li>
<li>Ao adaptar, sinalize que se trata de uma versão derivada.</li>
</ul>
</div>
</div>
</div>
</div>

</div>
</section>

<section id="creditos">
<div class="container">
<div class="heroCard">
<div class="heroBodyLine text-justify">
<div>
<h2>Créditos de elaboração</h2>
</div>

    <div class="card">
<h3>Instituições </h3>
<p>Este material foi desenvolvido por professores, pesquisadores e estudantes da área de Inteligência Artificial das seguintes instituições:</p>
<ul class="list">
<li>Universidade Federal da Bahia (UFBA).</li>
<li>Universidade do Estado da Bahia (UNEB).</li>
<li>Universidade SENAI/CIMATEC.</li>
     <li>Universidade Estadual de Feira de Santana (UEFS).</li>
<li>Universidade Estadual do Sudoeste da Bahia (UESB).</li>
<li>Universidade Estadual de Santa Cruz (UESC).</li>
<li>Instituto Federal Baiano (IF Baiano).</li>
</ul>
</div>
<br />
<div class="card">
<h3>Coordenação</h3>
<p>Essas instituições integram a Rede BAH.IA, sob a coordenação de:</p>
<ul class="list">
<li>Tatiane Nogueira Rios (Coordenadora Geral).</li>
<li>Ricardo Araújo Rios (Coordenador de Conteúdo).</li>
<li>Oberdan Rocha Pinheiro (Coordenador de Armazenamento e Portal).</li>
     <li>Josemar Rodrigues de Souza (Coordenador de Disseminação).</li>
</ul>
</div>
</div>
</div>

</div>
</section>

<section id="contato">
<div class="container">
<div class="heroCard">
<div class="heroBodyLine text-justify">
<div>
<h2>Contato e Informações</h2>
<p>
Para mais informações sobre a Rede Bah.IA e outros projetos da SECTI, entre em contato:
</p>
<p>
Endereço: 5ª Avenida, Plataforma II, Ala B, 1º Andar, nº 550, CAB, Salvador, BA, CEP: 41745-004
</p>
</div>
<br />

<div class="grid2">
<div class="card">
<h3>Contato</h3>
<p>
Contato: <a href="/secti/fale-conosco">https://www.ba.gov.br/secti/fale-conosco</a>
</p>
</div>

<div class="card">
<h3>Feedback rápido</h3>
<div class="ctaRow">
<a class="btn" href="https://forms.gle/jMfPmUpxEFdwF2vh6" target="_blank" rel="noopener">Formulário</a>
</div>
</div>
</div>
</div>

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

</main>

<footer>
<div class="container">
<div class="foot">
<p>
<strong>Rede BAH.IA</strong> — Portal educacional. Materiais para uso e adaptação com atribuição e preservação de créditos.
<br/>
Observação: links externos devem ser identificados e o conteúdo deve ser auditável institucionalmente.
</p>
<div class="miniLinks" aria-label="Links complementares">
<a href="#sobre">Sobre</a>
<a href="#como-usar">Como usar</a>
<a href="#modulos">Módulos</a>
<a href="#downloads">Downloads</a>
<a href="#contato">Contato</a>
</div>
</div>
</div>
</footer>

<div class="modalBackdrop" id="modalBackdrop" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
<div class="modal">
<div class="modalHead">
<strong id="modalTitle">Termo de uso e licença — Rede BAH.IA</strong>
<button class="x" id="closeModal" type="button" aria-label="Fechar">✕</button>
</div>
<div class="modalBody">
<p>
Antes de baixar, confirme que você leu e concorda com o termo abaixo.
(Não há exigência de cadastro e não há coleta obrigatória de dados.)
</p>
<div class="termBox" tabindex="0" aria-label="Termo de uso">
<p style="margin:0 0 10px;"><strong>Resumo do termo</strong></p>
<ol style="margin:0; padding-left:18px;">
<li>Este material é disponibilizado para <strong>fins educacionais</strong>.</li>
<li>É permitido <strong>baixar, usar e adaptar</strong>, desde que sejam mantidos <strong>créditos e referências</strong> à origem: “Rede BAH.IA – Governo do Estado da Bahia / SECTI”.</li>
<li>É vedada a <strong>remoção de marcas/logos</strong>, a redistribuição que induza <strong>autoria indevida</strong> e o uso que desvirtue o contexto educacional.</li>
<li>Ao adaptar, sinalize claramente que se trata de uma <strong>versão derivada</strong>.</li>
</ol>
<p style="margin:10px 0 0; color:rgba(255,255,255,.7); font-size:12px;">
Se vocês preferirem, substituam este termo por uma licença formal (ex.: Creative Commons) e adicionem o selo correspondente.
</p>
</div>
</div>
<div class="modalFoot">
<label class="checkRow">
<input id="agree" type="checkbox" />
<span>Li e concordo com o termo de uso e com a preservação de créditos e integridade do conteúdo.</span>
</label>
<div style="display:flex; gap:10px; align-items:center; flex-wrap:wrap;">
<span class="hint" id="modalHint">Marque a caixa para liberar o download.</span>
<button class="btn primary" id="confirmDownload" type="button" disabled>Baixar arquivo</button>
</div>
</div>
</div>
</div>

const modulesRoot = document.getElementById("modulesRoot");
const q = document.getElementById("q");
const resultNote = document.getElementById("resultNote");

function escapeHtml(s){
return String(s).replace(/[&<>"']/g, m => ({ "&":"&","<":"<",">":">",'"':""","'":"'" }[m]));
}

function includesQuery(obj, query){
const hay = [
obj.title, obj.subtitle, obj.prereq,
...(obj.tags||[]),
...(obj.lessons||[]).flatMap(l => [l.code, l.title])
].join(" ").toLowerCase();
return hay.includes(query.toLowerCase());
}

function renderModules(filter=""){
modulesRoot.innerHTML = "";
const data = filter ? modulesData.filter(m => includesQuery(m, filter)) : modulesData.slice();

resultNote.textContent = filter
? `Resultados para: "${filter}" — ${data.length} módulo(s).`
: "Mostrando todos os módulos.";

data.forEach(m => {
const el = document.createElement("article");
el.className = "moduleCard";
el.setAttribute("aria-label", m.title);

const tagsHtml = (m.tags||[]).map(t => `<span class="tag">${escapeHtml(t)}</span>`).join("");

el.innerHTML = `
<div class="moduleHeader">
<div>
<h3>${escapeHtml(m.title)}</h3>
<div class="meta">${escapeHtml(m.subtitle)} • <strong>Pré-requisito:</strong> ${escapeHtml(m.prereq)}</div>
</div>
<div class="tagRow">
${tagsHtml}
<button class="btnSm zip" type="button" data-download="${escapeHtml(m.zip)}" aria-label="Baixar módulo em ZIP">Baixar módulo (ZIP)</button>
</div>
</div>

<details>
<summary>
<span class="summaryLeft">
<strong>Ver aulas e materiais</strong>
<span>${m.lessons.length} aula(s)</span>
</span>
<span aria-hidden="true">▾</span>
</summary>

<div class="lessonList">
${m.lessons.map(l => `
<div class="lesson">
<div class="info">
<strong>${escapeHtml(l.code)} — ${escapeHtml(l.title)}</strong>
</div>
<div class="actions">
<button class="btnSm ppt" type="button" data-download="${escapeHtml(l.pptx)}">Aula</button>
<button class="btnSm doc" type="button" data-download="${escapeHtml(l.docx)}">Plano de Aula</button>
<button class="btnSm pdf" type="button"
data-download="${escapeHtml(l.pdf)}"
aria-label="Visualizar PDF"
title="Visualizar PDF">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M12 5C7 5 3.1 8 1.5 12C3.1 16 7 19 12 19C17 19 20.9 16 22.5 12C20.9 8 17 5 12 5Z"
stroke="currentColor" stroke-width="2"/>
<circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
</svg>
</button>

</div>
</div>
`).join("")}
</div>

</details>

`;

modulesRoot.appendChild(el);
});
}

// Termo / download gating
const modalBackdrop = document.getElementById("modalBackdrop");
const closeModalBtn = document.getElementById("closeModal");
const confirmBtn = document.getElementById("confirmDownload");
const agree = document.getElementById("agree");
const modalHint = document.getElementById("modalHint");

let pendingUrl = null;

function openModal(url){
pendingUrl = url;
agree.checked = false;
confirmBtn.disabled = true;
modalHint.textContent = "Marque a caixa para liberar o download.";
modalBackdrop.style.display = "flex";
// foco no modal
closeModalBtn.focus();
}
function closeModal(){
modalBackdrop.style.display = "none";
pendingUrl = null;
}

agree.addEventListener("change", () => {
const ok = agree.checked;
confirmBtn.disabled = !ok;
modalHint.textContent = ok ? "Pronto. Clique em “Baixar arquivo”." : "Marque a caixa para liberar o download.";
});

confirmBtn.addEventListener("click", () => {
if(!pendingUrl) return;

// Opcional: guardar consentimento local (não é dado pessoal)
localStorage.setItem("bahia_terms_accepted", "yes");

// Disparar download
const a = document.createElement("a");
a.href = pendingUrl;
a.download = "";
document.body.appendChild(a);
a.click();
a.remove();

closeModal();
});

closeModalBtn.addEventListener("click", closeModal);
modalBackdrop.addEventListener("click", (e) => {
if(e.target === modalBackdrop) closeModal();
});
document.addEventListener("keydown", (e) => {
if(e.key === "Escape" && modalBackdrop.style.display === "flex") closeModal();
});

// Delegação para botões com data-download
document.addEventListener("click", (e) => {
const btn = e.target.closest("[data-download]");
if(!btn) return;

const url = btn.getAttribute("data-download");
if(!url) return;

// Se quiser liberar sem termo quando já aceitou:
// if(localStorage.getItem("bahia_terms_accepted") === "yes"){ window.location.href = url; return; }

openModal(url);
});

// Busca
q.addEventListener("input", () => {
const value = q.value.trim();
renderModules(value);
});

// Inicial
renderModules();
</script>
</body>
</html>