Deploy HTML

<!DOCTYPE html>

<html lang="pt-BR">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>ATIVIDADES ADAPTADAS DE CIÊNCIAS - COM ILUSTRAÇÕES</title>

<script src="https://cdn.tailwindcss.com"></script>

<style>

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@500;700;800&display=swap');

body {

font-family: 'Lexend', sans-serif;

background-color: #F3F4F6;

color: #1F2937;

}

.letra-bastao {

text-transform: uppercase;

letter-spacing: 0.05em;

}

@media print {

.no-print { display: none !important; }

body { background-color: #FFFFFF; }

.page-break { page-break-before: always; }

.card-quest { break-inside: avoid; border: 2px solid #9CA3AF !important; box-shadow: none !important; }

}

</style>

</head>

<body class="p-4 md:p-8 letra-bastao">

<!-- CABEÇALHO DO DOCUMENTO -->

<header class="max-w-4xl mx-auto bg-white rounded-2xl p-6 shadow-md border-4 border-blue-400 mb-8">

<div class="flex flex-col md:flex-row justify-between items-center gap-4 mb-6 pb-4 border-b-2 border-gray-200">

<div>

<h1 class="text-2xl md:text-3xl font-extrabold text-blue-700">ATIVIDADES ADAPTADAS DE CIÊNCIAS</h1>

<p class="text-sm text-gray-600 font-bold mt-1">RECURSO DIDÁTICO ILUSTRADO PARA ENSINO FUNDAMENTAL </p>

</div>

<button onclick="window.print()" class="no-print bg-green-600 hover:bg-green-700 text-white font-extrabold px-6 py-3 rounded-xl shadow-lg flex items-center gap-2 text-base transition-all">

<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"></path></svg>

IMPRIMIR / SALVAR PDF

</button>

</div>

<!-- FICHA DO ALUNO -->

<div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-lg">

<div class="bg-blue-50 p-3 rounded-xl border-2 border-blue-200">

<span class="font-extrabold text-blue-900">NOME DO ALUNO:</span>

<div class="border-b-2 border-dashed border-blue-400 h-8 mt-1"></div>

</div>

<div class="bg-blue-50 p-3 rounded-xl border-2 border-blue-200">

<span class="font-extrabold text-blue-900">DATA:</span>

<div class="border-b-2 border-dashed border-blue-400 h-8 mt-1"></div>

</div>

</div>

</header>

<!-- FILTRO DE CAPÍTULOS (NO PRINT) -->

<nav class="no-print max-w-4xl mx-auto flex flex-wrap justify-center gap-2 mb-8">

<button onclick="filtrar('todos')" class="bg-gray-800 text-white px-4 py-2 rounded-lg font-bold hover:bg-gray-700">TODOS OS CAPÍTULOS</button>

<button onclick="filtrar('cap1')" class="bg-blue-600 text-white px-4 py-2 rounded-lg font-bold hover:bg-blue-700">CAPÍTULO 1: O TEMPO</button>

<button onclick="filtrar('cap2')" class="bg-green-600 text-white px-4 py-2 rounded-lg font-bold hover:bg-green-700">CAPÍTULO 2: MUDANÇAS</button>

<button onclick="filtrar('cap3')" class="bg-yellow-600 text-white px-4 py-2 rounded-lg font-bold hover:bg-yellow-700">CAPÍTULO 3: MATERIAIS</button>

<button onclick="filtrar('cap4')" class="bg-purple-600 text-white px-4 py-2 rounded-lg font-bold hover:bg-purple-700">CAPÍTULO 4: DE ONDE VEM?</button>

</nav>

<main class="max-w-4xl mx-auto space-y-12">

<!-- ================= CAPÍTULO 1 ================= -->

<section id="cap1" class="secao-capitulo space-y-8">

<div class="bg-blue-600 text-white p-4 rounded-2xl shadow-md border-b-8 border-blue-800">

<h2 class="text-2xl font-extrabold">CAPÍTULO 1: O TEMPO</h2>

<p class="text-sm font-bold opacity-90">PÁGINAS 222 A 229 DO LIVRO DIDÁTICO</p>

</div>

<!-- Q1.1 -->

<article class="card-quest bg-white p-6 rounded-2xl shadow-md border-4 border-blue-200">

<span class="inline-block bg-blue-100 text-blue-800 text-sm font-extrabold px-3 py-1 rounded-full mb-3">QUESTÃO 1</span>

<h3 class="text-xl font-extrabold text-gray-800 mb-4">OBSERVE A ILUSTRAÇÃO DA FESTA DE ANIVERSÁRIO (PÁGINA 222 DO LIVRO):</h3>

<!-- ILUSTRAÇÃO SVG -->

<div class="bg-blue-50 p-4 rounded-xl border-2 border-blue-300 flex justify-center mb-6">

<svg class="w-full max-w-md h-48" viewBox="0 0 400 200" fill="none" xmlns="http://www.w3.org/2000/svg">

<rect width="400" height="200" rx="12" fill="#EBF8FF"/>

<!-- Mesa -->

<rect x="50" y="130" width="300" height="50" rx="6" fill="#D69E2E"/>

<rect x="40" y="120" width="320" height="15" rx="4" fill="#B7791F"/>

<!-- Bolo -->

<rect x="150" y="75" width="100" height="45" rx="6" fill="#ED64A6"/>

<rect x="140" y="115" width="120" height="10" rx="2" fill="#FFF5F5"/>

<!-- Velas -->

<rect x="180" y="55" width="6" height="20" fill="#ECC94B"/>

<path d="M183 45 Q187 52 183 55 Q179 52 183 45 Z" fill="#DD6B20"/>

<rect x="210" y="55" width="6" height="20" fill="#4299E1"/>

<path d="M213 45 Q217 52 213 55 Q209 52 213 45 Z" fill="#DD6B20"/>

<!-- Bexigas -->

<circle cx="80" cy="50" r="22" fill="#E53E3E"/>

<path d="M80 72 L80 110" stroke="#718096" stroke-width="2"/>

<circle cx="110" cy="40" r="20" fill="#3182CE"/>

<path d="M110 60 L100 110" stroke="#718096" stroke-width="2"/>

<circle cx="300" cy="45" r="22" fill="#38A169"/>

<path d="M300 67 L300 110" stroke="#718096" stroke-width="2"/>

<circle cx="325" cy="60" r="18" fill="#DD6B20"/>

<path d="M325 78 L310 110" stroke="#718096" stroke-width="2"/>

</svg>

</div>

<p class="text-lg font-extrabold text-blue-900 mb-4">MARQUE COM UM X O QUE VOCÊ VÊ NA FESTA:</p>

<div class="space-y-3 text-lg font-bold">

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-blue-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-blue-600 rounded">

<span>[ &nbsp; ] BOLO E BEXIGAS</span>

</label>

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-blue-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-blue-600 rounded">

<span>[ &nbsp; ] NEVE E CORUJA</span>

</label>

</div>

</article>

<!-- Q1.2 -->

<article class="card-quest bg-white p-6 rounded-2xl shadow-md border-4 border-blue-200">

<span class="inline-block bg-blue-100 text-blue-800 text-sm font-extrabold px-3 py-1 rounded-full mb-3">QUESTÃO 2</span>

<h3 class="text-xl font-extrabold text-gray-800 mb-4">OBSERVE O DIAGRAMA DOS MOVIMENTOS DA TERRA (PÁGINA 223 DO LIVRO):</h3>

<div class="bg-blue-50 p-4 rounded-xl border-2 border-blue-300 flex justify-center mb-6">

<svg class="w-full max-w-md h-52" viewBox="0 0 400 200" fill="none" xmlns="http://www.w3.org/2000/svg">

<rect width="400" height="200" rx="12" fill="#1A202C"/>

<!-- Sol -->

<circle cx="200" cy="100" r="35" fill="#ECC94B"/>

<circle cx="200" cy="100" r="45" stroke="#F6E05E" stroke-width="3" stroke-dasharray="4 4"/>

<!-- Órbita -->

<ellipse cx="200" cy="100" rx="140" ry="60" stroke="#4A5568" stroke-width="2" stroke-dasharray="6 6"/>

<!-- Terra Rotação -->

<circle cx="80" cy="100" r="22" fill="#3182CE"/>

<path d="M 80 78 A 22 22 0 0 1 80 122 Z" fill="#2B6CB0"/>

<path d="M 65 90 Q 80 80 95 90" stroke="#ECC94B" stroke-width="3" fill="none" marker-end="url(#arrow)"/>

<text x="50" y="145" fill="#FFFFFF" font-size="12" font-weight="bold">ROTAÇÃO</text>

<text x="45" y="160" fill="#CBD5E0" font-size="10">(DIA E NOITE)</text>

<!-- Terra Translação -->

<circle cx="320" cy="100" r="22" fill="#3182CE"/>

<path d="M 320 78 A 22 22 0 0 1 320 122 Z" fill="#2B6CB0"/>

<path d="M 280 60 Q 320 30 350 70" stroke="#48BB78" stroke-width="3" fill="none"/>

<text x="285" y="145" fill="#FFFFFF" font-size="12" font-weight="bold">TRANSLAÇÃO</text>

<text x="280" y="160" fill="#CBD5E0" font-size="10">(ESTAÇÕES DO ANO)</text>

</svg>

</div>

<p class="text-lg font-extrabold text-blue-900 mb-4">LIGUE CADA MOVIMENTO AO QUE ELE FORMA:</p>

<div class="space-y-4 text-lg font-bold">

<div class="flex items-center justify-between p-3 bg-gray-50 rounded-xl border-2 border-gray-300">

<span>ROTAÇÃO (TERRA GIRA NELA MESMA)</span>

<span class="text-blue-600 font-extrabold">DIA E NOITE</span>

</div>

<div class="flex items-center justify-between p-3 bg-gray-50 rounded-xl border-2 border-gray-300">

<span>TRANSLAÇÃO (TERRA GIRA NO SOL)</span>

<span class="text-green-600 font-extrabold">ESTAÇÕES DO ANO</span>

</div>

</div>

</article>

<!-- Q1.3 -->

<article class="card-quest bg-white p-6 rounded-2xl shadow-md border-4 border-blue-200">

<span class="inline-block bg-blue-100 text-blue-800 text-sm font-extrabold px-3 py-1 rounded-full mb-3">QUESTÃO 3</span>

<h3 class="text-xl font-extrabold text-gray-800 mb-4">VEJA O CONVITE DE ANIVERSÁRIO DA CAMILA (PÁGINA 224 DO LIVRO):</h3>

<div class="bg-blue-50 p-4 rounded-xl border-2 border-blue-300 flex justify-center mb-6">

<div class="bg-yellow-100 border-4 border-yellow-400 rounded-2xl p-6 text-center max-w-sm shadow-md">

<p class="text-yellow-800 font-extrabold text-lg mb-2">🎉 VENHA COMEMORAR! 🎉</p>

<p class="text-gray-800 font-bold text-base mb-3">ANIVERSÁRIO DA CAMILA</p>

<div class="bg-white p-3 rounded-xl border-2 border-yellow-300 mb-2">

<p class="text-xl font-extrabold text-red-600">DIA: 5 / 11 / 2021</p>

<p class="text-md font-bold text-gray-700">HORÁRIO: 16 H</p>

</div>

<p class="text-xs text-gray-600">LOCAL: RUA DAS FLORES, N. 533</p>

</div>

</div>

<p class="text-lg font-extrabold text-blue-900 mb-4">QUAL É O DIA DA FESTA?</p>

<div class="space-y-3 text-lg font-bold">

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-blue-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-blue-600 rounded">

<span>[ &nbsp; ] DIA 5</span>

</label>

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-blue-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-blue-600 rounded">

<span>[ &nbsp; ] DIA 20</span>

</label>

</div>

</article>

<!-- Q1.4 -->

<article class="card-quest bg-white p-6 rounded-2xl shadow-md border-4 border-blue-200">

<span class="inline-block bg-blue-100 text-blue-800 text-sm font-extrabold px-3 py-1 rounded-full mb-3">QUESTÃO 4</span>

<h3 class="text-xl font-extrabold text-gray-800 mb-4">OBSERVE O QUADRO DOS MESES DO ANO (PÁGINA 225 DO LIVRO):</h3>

<div class="bg-blue-50 p-4 rounded-xl border-2 border-blue-300 mb-6">

<div class="grid grid-cols-3 md:grid-cols-4 gap-2 text-center text-xs md:text-sm font-extrabold">

<div class="bg-blue-500 text-white p-2 rounded-lg">1 - JAN</div>

<div class="bg-blue-500 text-white p-2 rounded-lg">2 - FEV</div>

<div class="bg-blue-500 text-white p-2 rounded-lg">3 - MAR</div>

<div class="bg-blue-500 text-white p-2 rounded-lg">4 - ABR</div>

<div class="bg-green-500 text-white p-2 rounded-lg">5 - MAI</div>

<div class="bg-green-500 text-white p-2 rounded-lg">6 - JUN</div>

<div class="bg-green-500 text-white p-2 rounded-lg">7 - JUL</div>

<div class="bg-green-500 text-white p-2 rounded-lg">8 - AGO</div>

<div class="bg-purple-500 text-white p-2 rounded-lg">9 - SET</div>

<div class="bg-purple-500 text-white p-2 rounded-lg">10 - OUT</div>

<div class="bg-purple-500 text-white p-2 rounded-lg">11 - NOV</div>

<div class="bg-purple-500 text-white p-2 rounded-lg">12 - DEZ</div>

</div>

</div>

<p class="text-lg font-extrabold text-blue-900 mb-4">QUANTOS MESES TEM 1 ANO?</p>

<div class="space-y-3 text-lg font-bold">

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-blue-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-blue-600 rounded">

<span>[ &nbsp; ] 12 MESES</span>

</label>

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-blue-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-blue-600 rounded">

<span>[ &nbsp; ] 2 MESES</span>

</label>

</div>

</article>

<!-- Q1.5 -->

<article class="card-quest bg-white p-6 rounded-2xl shadow-md border-4 border-blue-200">

<span class="inline-block bg-blue-100 text-blue-800 text-sm font-extrabold px-3 py-1 rounded-full mb-3">QUESTÃO 5</span>

<h3 class="text-xl font-extrabold text-gray-800 mb-4">OBSERVE A MENINA NA CAMA (PÁGINA 226 DO LIVRO):</h3>

<div class="bg-blue-50 p-4 rounded-xl border-2 border-blue-300 flex justify-center mb-6">

<svg class="w-full max-w-md h-48" viewBox="0 0 400 200" fill="none" xmlns="http://www.w3.org/2000/svg">

<rect width="400" height="200" rx="12" fill="#2C3E50"/>

<!-- Janela -->

<rect x="260" y="30" width="100" height="90" rx="8" fill="#1A252F" stroke="#E2E8F0" stroke-width="4"/>

<path d="M 310 30 L 310 120 M 260 75 L 360 75" stroke="#E2E8F0" stroke-width="2"/>

<!-- Lua e Estrelas -->

<path d="M 285 45 A 12 12 0 1 0 300 60 A 10 10 0 1 1 285 45 Z" fill="#F1C40F"/>

<circle cx="330" cy="55" r="2" fill="#FFFFFF"/>

<circle cx="345" cy="85" r="2" fill="#FFFFFF"/>

<!-- Cama -->

<rect x="40" y="110" width="200" height="60" rx="8" fill="#E74C3C"/>

<rect x="30" y="80" width="25" height="100" rx="4" fill="#7F8C8D"/>

<!-- Travesseiro -->

<rect x="55" y="100" width="45" height="30" rx="6" fill="#FFFFFF"/>

<!-- Cabeça Dormindo -->

<circle cx="75" cy="110" r="14" fill="#F39C12"/>

<!-- Coberta -->

<path d="M 90 110 L 230 110 Q 240 140 230 170 L 90 170 Z" fill="#3498DB"/>

<text x="100" y="80" fill="#ECF0F1" font-size="16" font-weight="bold">z Z Z ...</text>

</svg>

</div>

<p class="text-lg font-extrabold text-blue-900 mb-4">O QUE ELA FAZ QUANDO É NOITE?</p>

<div class="space-y-3 text-lg font-bold">

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-blue-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-blue-600 rounded">

<span>[ &nbsp; ] DORME</span>

</label>

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-blue-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-blue-600 rounded">

<span>[ &nbsp; ] BRINCA NO PARQUE</span>

</label>

</div>

</article>

<!-- Q1.6 -->

<article class="card-quest bg-white p-6 rounded-2xl shadow-md border-4 border-blue-200">

<span class="inline-block bg-blue-100 text-blue-800 text-sm font-extrabold px-3 py-1 rounded-full mb-3">QUESTÃO 6</span>

<h3 class="text-xl font-extrabold text-gray-800 mb-4">OBSERVE OS RELÓGIOS (PÁGINA 227 DO LIVRO):</h3>

<div class="bg-blue-50 p-4 rounded-xl border-2 border-blue-300 flex justify-center mb-6">

<svg class="w-full max-w-md h-48" viewBox="0 0 400 200" fill="none" xmlns="http://www.w3.org/2000/svg">

<rect width="400" height="200" rx="12" fill="#EDF2F7"/>

<!-- Relógio de Sol A -->

<g transform="translate(30,20)">

<rect x="0" y="0" width="150" height="150" rx="12" fill="#FFFFFF" stroke="#CBD5E0" stroke-width="2"/>

<text x="50" y="25" fill="#2B6CB0" font-size="14" font-weight="bold">(A) RELÓGIO DE SOL</text>

<circle cx="75" cy="85" r="45" fill="#E2E8F0" stroke="#A0AEC0" stroke-width="3"/>

<!-- Sol em cima -->

<circle cx="35" cy="45" r="10" fill="#ECC94B"/>

<!-- Gnomon e Sombra -->

<polygon points="75,85 75,50 90,85" fill="#4A5568"/>

<polygon points="75,85 110,105 75,90" fill="#718096" opacity="0.6"/>

</g>

<!-- Relógio Digital/Atual B -->

<g transform="translate(220,20)">

<rect x="0" y="0" width="150" height="150" rx="12" fill="#FFFFFF" stroke="#CBD5E0" stroke-width="2"/>

<text x="45" y="25" fill="#2B6CB0" font-size="14" font-weight="bold">(B) RELÓGIO ATUAL</text>

<circle cx="75" cy="85" r="45" fill="#FFFFFF" stroke="#2D3748" stroke-width="4"/>

<line x1="75" y1="85" x2="75" y2="55" stroke="#E53E3E" stroke-width="3"/>

<line x1="75" y1="85" x2="95" y2="85" stroke="#2D3748" stroke-width="4"/>

<text x="70" y="52" fill="#2D3748" font-size="10" font-weight="bold">12</text>

<text x="72" y="125" fill="#2D3748" font-size="10" font-weight="bold">6</text>

</g>

</svg>

</div>

<p class="text-lg font-extrabold text-blue-900 mb-4">O RELÓGIO DA IMAGEM (A) USA A LUZ DE QUAL ASTRO?</p>

<div class="space-y-3 text-lg font-bold">

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-blue-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-blue-600 rounded">

<span>[ &nbsp; ] SOL</span>

</label>

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-blue-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-blue-600 rounded">

<span>[ &nbsp; ] LUA</span>

</label>

</div>

</article>

<!-- Q1.7 -->

<article class="card-quest bg-white p-6 rounded-2xl shadow-md border-4 border-blue-200">

<span class="inline-block bg-blue-100 text-blue-800 text-sm font-extrabold px-3 py-1 rounded-full mb-3">QUESTÃO 7</span>

<h3 class="text-xl font-extrabold text-gray-800 mb-4">OBSERVE OS SERES VIVOS (PÁGINA 227 DO LIVRO):</h3>

<div class="bg-blue-50 p-4 rounded-xl border-2 border-blue-300 flex justify-center mb-6">

<div class="grid grid-cols-2 gap-4 text-center">

<div class="bg-white p-4 rounded-xl border-2 border-blue-200">

<span class="text-yellow-500 font-extrabold text-sm block mb-2">☀️ DIA</span>

<div class="text-4xl mb-2">🐤</div>

<p class="font-extrabold text-sm text-gray-800">(A) BEM-TE-VI</p>

<p class="text-xs text-gray-500 font-bold">ATIVO DE DIA</p>

</div>

<div class="bg-gray-800 text-white p-4 rounded-xl border-2 border-gray-600">

<span class="text-blue-300 font-extrabold text-sm block mb-2">🌙 NOITE</span>

<div class="text-4xl mb-2">🌸</div>

<p class="font-extrabold text-sm text-white">(B) DAMA-DA-NOITE</p>

<p class="text-xs text-gray-300 font-bold">ABRE DE NOITE</p>

</div>

</div>

</div>

<p class="text-lg font-extrabold text-blue-900 mb-4">QUAL ANIMAL É DIURNO (MAIS ATIVO DE DIA)?</p>

<div class="space-y-3 text-lg font-bold">

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-blue-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-blue-600 rounded">

<span>[ &nbsp; ] BEM-TE-VI</span>

</label>

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-blue-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-blue-600 rounded">

<span>[ &nbsp; ] CORUJA</span>

</label>

</div>

</article>

<!-- Q1.8 -->

<article class="card-quest bg-white p-6 rounded-2xl shadow-md border-4 border-blue-200">

<span class="inline-block bg-blue-100 text-blue-800 text-sm font-extrabold px-3 py-1 rounded-full mb-3">QUESTÃO 8</span>

<h3 class="text-xl font-extrabold text-gray-800 mb-4">OBSERVE O CALENDÁRIO DE SETEMBRO (PÁGINA 229 DO LIVRO):</h3>

<div class="bg-blue-50 p-4 rounded-xl border-2 border-blue-300 flex justify-center mb-6">

<div class="bg-white border-4 border-red-500 rounded-2xl p-4 w-64 shadow-md text-center">

<div class="bg-red-500 text-white font-extrabold p-2 rounded-t-lg -mx-4 -mt-4 mb-3">

SETEMBRO 2021

</div>

<div class="grid grid-cols-7 gap-1 text-xs font-bold text-gray-500 mb-2">

<span>D</span><span>S</span><span>T</span><span>Q</span><span>Q</span><span>S</span><span>S</span>

</div>

<div class="grid grid-cols-7 gap-1 text-sm font-extrabold text-gray-800">

<span></span><span></span><span></span><span>1</span><span>2</span>

<span class="relative flex justify-center items-center">

<span class="w-7 h-7 bg-red-200 text-red-800 rounded-full border-2 border-red-600 flex items-center justify-center font-extrabold">3</span>

</span>

<span>4</span>

<span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span>

</div>

</div>

</div>

<p class="text-lg font-extrabold text-blue-900 mb-4">QUAL NÚMERO ESTÁ DENTRO DO CÍRCULO?</p>

<div class="space-y-3 text-lg font-bold">

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-blue-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-blue-600 rounded">

<span>[ &nbsp; ] 3</span>

</label>

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-blue-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-blue-600 rounded">

<span>[ &nbsp; ] 15</span>

</label>

</div>

</article>

</section>

<!-- ================= CAPÍTULO 2 ================= -->

<section id="cap2" class="secao-capitulo space-y-8 page-break">

<div class="bg-green-600 text-white p-4 rounded-2xl shadow-md border-b-8 border-green-800">

<h2 class="text-2xl font-extrabold">CAPÍTULO 2: MUDANÇAS AO LONGO DO ANO</h2>

<p class="text-sm font-bold opacity-90">PÁGINAS 230 A 239 DO LIVRO DIDÁTICO</p>

</div>

<!-- Q2.1 -->

<article class="card-quest bg-white p-6 rounded-2xl shadow-md border-4 border-green-200">

<span class="inline-block bg-green-100 text-green-800 text-sm font-extrabold px-3 py-1 rounded-full mb-3">QUESTÃO 1</span>

<h3 class="text-xl font-extrabold text-gray-800 mb-4">OBSERVE AS ÁRVORES NAS 4 ESTAÇÕES (PÁGINA 230 DO LIVRO):</h3>

<div class="bg-green-50 p-4 rounded-xl border-2 border-green-300 flex justify-center mb-6">

<div class="grid grid-cols-2 md:grid-cols-4 gap-2 text-center">

<!-- Primavera -->

<div class="bg-white p-2 rounded-xl border border-green-200">

<svg class="w-20 h-24 mx-auto" viewBox="0 0 100 120">

<rect x="42" y="70" width="16" height="40" fill="#8B4513"/>

<circle cx="50" cy="50" r="30" fill="#FBB6CE"/>

<circle cx="35" cy="40" r="8" fill="#ED64A6"/>

<circle cx="65" cy="55" r="8" fill="#ED64A6"/>

</svg>

<span class="text-xs font-extrabold text-pink-600">1. FLORES</span>

</div>

<!-- Verão -->

<div class="bg-white p-2 rounded-xl border border-green-200">

<svg class="w-20 h-24 mx-auto" viewBox="0 0 100 120">

<rect x="42" y="70" width="16" height="40" fill="#8B4513"/>

<circle cx="50" cy="45" r="35" fill="#48BB78"/>

</svg>

<span class="text-xs font-extrabold text-green-700">2. VERDE</span>

</div>

<!-- Outono -->

<div class="bg-white p-2 rounded-xl border border-green-200">

<svg class="w-20 h-24 mx-auto" viewBox="0 0 100 120">

<rect x="42" y="70" width="16" height="40" fill="#8B4513"/>

<circle cx="50" cy="50" r="28" fill="#ED8936"/>

<circle cx="30" cy="90" r="4" fill="#DD6B20"/>

<circle cx="70" cy="95" r="4" fill="#DD6B20"/>

</svg>

<span class="text-xs font-extrabold text-orange-600">3. FOLHAS CAÍDAS</span>

</div>

<!-- Inverno -->

<div class="bg-white p-2 rounded-xl border border-blue-200">

<svg class="w-20 h-24 mx-auto" viewBox="0 0 100 120">

<rect x="42" y="70" width="16" height="40" fill="#718096"/>

<path d="M50 30 L50 70 M35 45 L65 55 M35 60 L65 40" stroke="#4A5568" stroke-width="4"/>

<path d="M30 100 L70 100" stroke="#E2E8F0" stroke-width="8" stroke-linecap="round"/>

</svg>

<span class="text-xs font-extrabold text-blue-600">4. NEVE / FRIO</span>

</div>

</div>

</div>

<p class="text-lg font-extrabold text-green-900 mb-4">EM QUAL DESSAS SITUAÇÕES TEM NEVE E FAZ MAIS FRIO?</p>

<div class="space-y-3 text-lg font-bold">

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-green-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-green-600 rounded">

<span>[ &nbsp; ] PRIMEIRA ÁRVORE (COM FLORES)</span>

</label>

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-green-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-green-600 rounded">

<span>[ &nbsp; ] ÚLTIMA ÁRVORE (COM NEVE)</span>

</label>

</div>

</article>

<!-- Q2.2 -->

<article class="card-quest bg-white p-6 rounded-2xl shadow-md border-4 border-green-200">

<span class="inline-block bg-green-100 text-green-800 text-sm font-extrabold px-3 py-1 rounded-full mb-3">QUESTÃO 2</span>

<h3 class="text-xl font-extrabold text-gray-800 mb-4">OBSERVE AS IMAGENS DAS ESTAÇÕES (PÁGINAS 232 E 233 DO LIVRO):</h3>

<div class="bg-green-50 p-4 rounded-xl border-2 border-green-300 mb-6">

<div class="grid grid-cols-2 gap-3 text-center text-sm font-extrabold">

<div class="bg-yellow-200 p-3 rounded-xl text-yellow-900">☀️ VERÃO (SOL E PISCINA)</div>

<div class="bg-blue-200 p-3 rounded-xl text-blue-900">❄️ INVERNO (FRIO E CASACO)</div>

<div class="bg-pink-200 p-3 rounded-xl text-pink-900">🌸 PRIMAVERA (FLORES)</div>

<div class="bg-orange-200 p-3 rounded-xl text-orange-900">🍂 OUTONO (FRUTAS E FOLHAS)</div>

</div>

</div>

<p class="text-lg font-extrabold text-green-900 mb-4">LIGUE A ESTAÇÃO COM A SUA CARACTERÍSTICA:</p>

<div class="space-y-3 text-base font-bold">

<div class="flex items-center justify-between p-3 bg-gray-50 rounded-xl border">

<span>VERÃO</span> <span class="text-yellow-600"> SOL E PISCINA</span>

</div>

<div class="flex items-center justify-between p-3 bg-gray-50 rounded-xl border">

<span>INVERNO</span> <span class="text-blue-600"> FRIO E ROUPAS QUENTES</span>

</div>

<div class="flex items-center justify-between p-3 bg-gray-50 rounded-xl border">

<span>PRIMAVERA</span> <span class="text-pink-600"> FLORES E BORBOLETAS</span>

</div>

<div class="flex items-center justify-between p-3 bg-gray-50 rounded-xl border">

<span>OUTONO</span> <span class="text-orange-600"> FRUTAS E FOLHAS NO CHÃO</span>

</div>

</div>

</article>

<!-- Q2.3 -->

<article class="card-quest bg-white p-6 rounded-2xl shadow-md border-4 border-green-200">

<span class="inline-block bg-green-100 text-green-800 text-sm font-extrabold px-3 py-1 rounded-full mb-3">QUESTÃO 3</span>

<h3 class="text-xl font-extrabold text-gray-800 mb-4">OBSERVE OS MORCEGOS E AS BALEIAS (PÁGINA 234 DO LIVRO):</h3>

<div class="bg-green-50 p-4 rounded-xl border-2 border-green-300 flex justify-center mb-6">

<div class="grid grid-cols-2 gap-4 text-center">

<div class="bg-gray-800 text-white p-4 rounded-xl">

<div class="text-3xl mb-1">🦇 zZZ</div>

<p class="font-extrabold text-xs text-yellow-400">MORCEGO DORMINDO NO FRIO</p>

<p class="text-xs text-gray-300 mt-1">ECONOMIZA ENERGIA</p>

</div>

<div class="bg-blue-600 text-white p-4 rounded-xl">

<div class="text-3xl mb-1">🐋 🌊</div>

<p class="font-extrabold text-xs text-cyan-200">BALEIAS VIAJANDO</p>

<p class="text-xs text-blue-100 mt-1">PROCURAM COMIDA</p>

</div>

</div>

</div>

<p class="text-lg font-extrabold text-green-900 mb-4">OS MORCEGOS DORMEM NO FRIO PARA ECONOMIZAR ENERGIA. COMO SE CHAMA ISSO?</p>

<div class="space-y-3 text-lg font-bold">

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-green-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-green-600 rounded">

<span>[ &nbsp; ] HIBERNAÇÃO</span>

</label>

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-green-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-green-600 rounded">

<span>[ &nbsp; ] NATAÇÃO</span>

</label>

</div>

</article>

<!-- Q2.4 -->

<article class="card-quest bg-white p-6 rounded-2xl shadow-md border-4 border-green-200">

<span class="inline-block bg-green-100 text-green-800 text-sm font-extrabold px-3 py-1 rounded-full mb-3">QUESTÃO 4</span>

<h3 class="text-xl font-extrabold text-gray-800 mb-4">OBSERVE O LAGO E A PRAIA (PÁGINA 235 DO LIVRO):</h3>

<div class="bg-green-50 p-4 rounded-xl border-2 border-green-300 flex justify-center mb-6">

<div class="grid grid-cols-2 gap-4 text-center">

<div class="bg-cyan-100 p-3 rounded-xl border border-cyan-400">

<p class="font-extrabold text-xs text-cyan-900 mb-2">(A) LAGO PARADO</p>

<div class="h-16 bg-cyan-400 rounded-lg flex items-center justify-center text-white font-extrabold text-xs">ÁGUA LISA / ESPELHO</div>

</div>

<div class="bg-blue-100 p-3 rounded-xl border border-blue-400">

<p class="font-extrabold text-xs text-blue-900 mb-2">(B) PRAIA COM ONDAS</p>

<div class="h-16 bg-blue-500 rounded-lg flex items-center justify-center text-white font-extrabold text-xs">ONDAS SE MOVEM</div>

</div>

</div>

</div>

<p class="text-lg font-extrabold text-green-900 mb-4">EM QUAL LUGAR A ÁGUA PARECE UM ESPELHO LISO?</p>

<div class="space-y-3 text-lg font-bold">

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-green-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-green-600 rounded">

<span>[ &nbsp; ] LAGO COM ÁGUA PARADA</span>

</label>

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-green-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-green-600 rounded">

<span>[ &nbsp; ] PRAIA COM ONDAS</span>

</label>

</div>

</article>

<!-- Q2.5 -->

<article class="card-quest bg-white p-6 rounded-2xl shadow-md border-4 border-green-200">

<span class="inline-block bg-green-100 text-green-800 text-sm font-extrabold px-3 py-1 rounded-full mb-3">QUESTÃO 5</span>

<h3 class="text-xl font-extrabold text-gray-800 mb-4">VEJA O EXPERIMENTO DOS COPOS DE ÁGUA (PÁGINAS 235 E 236 DO LIVRO):</h3>

<div class="bg-green-50 p-4 rounded-xl border-2 border-green-300 flex justify-center mb-6">

<div class="grid grid-cols-2 gap-4 text-center">

<div class="bg-white p-3 rounded-xl border">

<p class="font-extrabold text-xs text-gray-700 mb-1">COPO SÓ ÁGUA</p>

<span class="text-green-600 font-extrabold text-xs">LUZ PASSA RETA</span>

</div>

<div class="bg-white p-3 rounded-xl border border-yellow-400">

<p class="font-extrabold text-xs text-gray-700 mb-1">COPO COM AÇÚCAR</p>

<span class="text-orange-600 font-extrabold text-xs">LUZ EMBAÇADA / ESPALHADA</span>

</div>

</div>

</div>

<p class="text-lg font-extrabold text-green-900 mb-4">O QUE ACONTECEU COM A LUZ NO COPO COM ÁGUA E AÇÚCAR?</p>

<div class="space-y-3 text-lg font-bold">

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-green-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-green-600 rounded">

<span>[ &nbsp; ] A LUZ FICOU EMBAÇADA</span>

</label>

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-green-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-green-600 rounded">

<span>[ &nbsp; ] A LUZ SUMIU</span>

</label>

</div>

</article>

<!-- Q2.6 -->

<article class="card-quest bg-white p-6 rounded-2xl shadow-md border-4 border-green-200">

<span class="inline-block bg-green-100 text-green-800 text-sm font-extrabold px-3 py-1 rounded-full mb-3">QUESTÃO 6</span>

<h3 class="text-xl font-extrabold text-gray-800 mb-4">LEIA SOBRE O TELHADO BRANCO (PÁGINA 237 DO LIVRO):</h3>

<div class="bg-green-50 p-4 rounded-xl border-2 border-green-300 flex justify-center mb-6">

<svg class="w-full max-w-md h-40" viewBox="0 0 400 160" fill="none" xmlns="http://www.w3.org/2000/svg">

<rect width="400" height="160" rx="12" fill="#FEFCBF"/>

<!-- Sol -->

<circle cx="200" cy="30" r="18" fill="#ECC94B"/>

<line x1="200" y1="55" x2="200" y2="75" stroke="#DD6B20" stroke-width="4" marker-end="url(#arrow)"/>

<!-- Telhado Branco -->

<polygon points="120,110 200,60 280,110" fill="#FFFFFF" stroke="#CBD5E0" stroke-width="4"/>

<!-- Paredes Casa -->

<rect x="140" y="110" width="120" height="40" fill="#EDF2F7"/>

<!-- Raios Refletidos -->

<line x1="170" y1="75" x2="130" y2="40" stroke="#ECC94B" stroke-width="4"/>

<line x1="230" y1="75" x2="270" y2="40" stroke="#ECC94B" stroke-width="4"/>

<text x="135" y="135" fill="#2B6CB0" font-size="12" font-weight="bold">CASA FRESCA!</text>

</svg>

</div>

<p class="text-lg font-extrabold text-green-900 mb-4">AS CORES CLARAS REFLETEM A LUZ DO SOL. O TELHADO BRANCO DEIXA A CASA:</p>

<div class="space-y-3 text-lg font-bold">

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-green-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-green-600 rounded">

<span>[ &nbsp; ] MAIS FRESCA</span>

</label>

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-green-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-green-600 rounded">

<span>[ &nbsp; ] MAIS QUENTE</span>

</label>

</div>

</article>

<!-- Q2.7 -->

<article class="card-quest bg-white p-6 rounded-2xl shadow-md border-4 border-green-200">

<span class="inline-block bg-green-100 text-green-800 text-sm font-extrabold px-3 py-1 rounded-full mb-3">QUESTÃO 7</span>

<h3 class="text-xl font-extrabold text-gray-800 mb-4">OBSERVE A IMAGEM DA PELE VERMELHA (PÁGINA 238 DO LIVRO):</h3>

<div class="bg-green-50 p-4 rounded-xl border-2 border-green-300 flex justify-center mb-6">

<div class="bg-red-100 border-2 border-red-400 p-4 rounded-xl text-center max-w-sm">

<span class="text-4xl block mb-2">☀️ 🥵</span>

<p class="font-extrabold text-red-700 text-sm">PELE VERMELHA E DOÍDA DE SOL</p>

<p class="text-xs text-red-900 mt-1">SEM FILTRO SOLAR</p>

</div>

</div>

<p class="text-lg font-extrabold text-green-900 mb-4">O QUE ACONTECE SE FICAR MUITO TEMPO NO SOL SEM PROTETOR?</p>

<div class="space-y-3 text-lg font-bold">

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-green-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-green-600 rounded">

<span>[ &nbsp; ] QUEIMADURA NA PELE</span>

</label>

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-green-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-green-600 rounded">

<span>[ &nbsp; ] A PELE FICA AZUL</span>

</label>

</div>

</article>

<!-- Q2.8 -->

<article class="card-quest bg-white p-6 rounded-2xl shadow-md border-4 border-green-200">

<span class="inline-block bg-green-100 text-green-800 text-sm font-extrabold px-3 py-1 rounded-full mb-3">QUESTÃO 8</span>

<h3 class="text-xl font-extrabold text-gray-800 mb-4">OBSERVE AS BALEIAS JUBARTE (PÁGINA 234 E 239 DO LIVRO):</h3>

<div class="bg-green-50 p-4 rounded-xl border-2 border-green-300 flex justify-center mb-6">

<div class="bg-blue-500 text-white p-4 rounded-xl text-center w-full max-w-md">

<span class="text-4xl block mb-2">🐋 🐋 🌊</span>

<p class="font-extrabold text-cyan-200 text-sm">BALEIAS VIAJAM MILHARES DE QUILÔMETROS</p>

</div>

</div>

<p class="text-lg font-extrabold text-green-900 mb-4">POR QUE AS BALEIAS VIAJAM (MIGRAM) PARA OUTROS LUGARES?</p>

<div class="space-y-3 text-lg font-bold">

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-green-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-green-600 rounded">

<span>[ &nbsp; ] PARA BUSCAR COMIDA E ÁGUA QUENTE</span>

</label>

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-green-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-green-600 rounded">

<span>[ &nbsp; ] PARA PASSEAR DE NAVIO</span>

</label>

</div>

</article>

</section>

<!-- ================= CAPÍTULO 3 ================= -->

<section id="cap3" class="secao-capitulo space-y-8 page-break">

<div class="bg-yellow-500 text-white p-4 rounded-2xl shadow-md border-b-8 border-yellow-700">

<h2 class="text-2xl font-extrabold">CAPÍTULO 3: DESTINO E DESCARTE DOS MATERIAIS</h2>

<p class="text-sm font-bold opacity-90">PÁGINAS 240 A 251 DO LIVRO DIDÁTICO</p>

</div>

<!-- Q3.1 -->

<article class="card-quest bg-white p-6 rounded-2xl shadow-md border-4 border-yellow-200">

<span class="inline-block bg-yellow-100 text-yellow-800 text-sm font-extrabold px-3 py-1 rounded-full mb-3">QUESTÃO 1</span>

<h3 class="text-xl font-extrabold text-gray-800 mb-4">OBSERVE AS LIXEIRAS COLORIDAS (PÁGINA 240 E 246 DO LIVRO):</h3>

<div class="bg-yellow-50 p-4 rounded-xl border-2 border-yellow-300 flex justify-center mb-6">

<div class="grid grid-cols-2 md:grid-cols-4 gap-2 text-center text-xs font-extrabold text-white">

<div class="bg-blue-600 p-3 rounded-xl">🗑️ AZUL<br>(PAPEL)</div>

<div class="bg-red-600 p-3 rounded-xl">🗑️ VERMELHA<br>(PLÁSTICO)</div>

<div class="bg-green-600 p-3 rounded-xl">🗑️ VERDE<br>(VIDRO)</div>

<div class="bg-yellow-500 p-3 rounded-xl text-gray-900">🗑️ AMARELA<br>(METAL)</div>

</div>

</div>

<p class="text-lg font-extrabold text-yellow-900 mb-4">LIGUE O MATERIAL NA COR DA LIXEIRA CORRETA:</p>

<div class="space-y-3 text-base font-bold">

<div class="flex items-center justify-between p-3 bg-gray-50 rounded-xl border">

<span>PAPEL</span> <span class="text-blue-600"> LIXEIRA AZUL</span>

</div>

<div class="flex items-center justify-between p-3 bg-gray-50 rounded-xl border">

<span>PLÁSTICO</span> <span class="text-red-600"> LIXEIRA VERMELHA</span>

</div>

<div class="flex items-center justify-between p-3 bg-gray-50 rounded-xl border">

<span>VIDRO</span> <span class="text-green-600"> LIXEIRA VERDE</span>

</div>

<div class="flex items-center justify-between p-3 bg-gray-50 rounded-xl border">

<span>METAL</span> <span class="text-yellow-600"> LIXEIRA AMARELA</span>

</div>

</div>

</article>

<!-- Q3.2 -->

<article class="card-quest bg-white p-6 rounded-2xl shadow-md border-4 border-yellow-200">

<span class="inline-block bg-yellow-100 text-yellow-800 text-sm font-extrabold px-3 py-1 rounded-full mb-3">QUESTÃO 2</span>

<h3 class="text-xl font-extrabold text-gray-800 mb-4">OBSERVE OS BRINQUEDOS (PÁGINA 242 DO LIVRO):</h3>

<div class="bg-yellow-50 p-4 rounded-xl border-2 border-yellow-300 flex justify-center mb-6">

<div class="text-center">

<span class="text-5xl block mb-2">🧩 ✈️ 🤖</span>

<p class="font-extrabold text-gray-700 text-sm">BLOCOS DE MONTAR E CARRINHOS</p>

</div>

</div>

<p class="text-lg font-extrabold text-yellow-900 mb-4">OS BRINQUEDOS SÃO FEITOS DE QUAL MATERIAL?</p>

<div class="space-y-3 text-lg font-bold">

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-yellow-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-yellow-600 rounded">

<span>[ &nbsp; ] PLÁSTICO</span>

</label>

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-yellow-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-yellow-600 rounded">

<span>[ &nbsp; ] VIDRO</span>

</label>

</div>

</article>

<!-- Q3.3 -->

<article class="card-quest bg-white p-6 rounded-2xl shadow-md border-4 border-yellow-200">

<span class="inline-block bg-yellow-100 text-yellow-800 text-sm font-extrabold px-3 py-1 rounded-full mb-3">QUESTÃO 3</span>

<h3 class="text-xl font-extrabold text-gray-800 mb-4">OBSERVE O DESCARTE DO LIXO (PÁGINA 243 DO LIVRO):</h3>

<div class="bg-yellow-50 p-4 rounded-xl border-2 border-yellow-300 flex justify-center mb-6">

<div class="grid grid-cols-2 gap-4 text-center">

<div class="bg-green-100 border-2 border-green-500 p-3 rounded-xl">

<span class="text-3xl block">🗑️ 👍</span>

<p class="font-extrabold text-green-800 text-xs mt-1">LIXO DENTRO DA LIXEIRA</p>

</div>

<div class="bg-red-100 border-2 border-red-500 p-3 rounded-xl">

<span class="text-3xl block">🚮 👎</span>

<p class="font-extrabold text-red-800 text-xs mt-1">LIXO JOGADO NO CHÃO</p>

</div>

</div>

</div>

<p class="text-lg font-extrabold text-yellow-900 mb-4">QUAL É O LUGAR CERTO PARA JOGAR O LIXO?</p>

<div class="space-y-3 text-lg font-bold">

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-yellow-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-yellow-600 rounded">

<span>[ &nbsp; ] NA LIXEIRA</span>

</label>

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-yellow-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-yellow-600 rounded">

<span>[ &nbsp; ] NO CHÃO DA RUA</span>

</label>

</div>

</article>

<!-- Q3.4 -->

<article class="card-quest bg-white p-6 rounded-2xl shadow-md border-4 border-yellow-200">

<span class="inline-block bg-yellow-100 text-yellow-800 text-sm font-extrabold px-3 py-1 rounded-full mb-3">QUESTÃO 4</span>

<h3 class="text-xl font-extrabold text-gray-800 mb-4">OBSERVE OS VASOS DE GARRAFA PET (PÁGINA 244 DO LIVRO):</h3>

<div class="bg-yellow-50 p-4 rounded-xl border-2 border-yellow-300 flex justify-center mb-6">

<div class="text-center bg-white p-4 rounded-xl border border-yellow-400">

<span class="text-4xl block mb-2">🍾 🪴</span>

<p class="font-extrabold text-gray-800 text-xs">GARRAFAS PLÁSTICAS VIRARAM VASOS DE PLANTAS!</p>

</div>

</div>

<p class="text-lg font-extrabold text-yellow-900 mb-4">ESSES OBJETOS FORAM:</p>

<div class="space-y-3 text-lg font-bold">

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-yellow-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-yellow-600 rounded">

<span>[ &nbsp; ] REUTILIZADOS</span>

</label>

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-yellow-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-yellow-600 rounded">

<span>[ &nbsp; ] JOGADOS NO RIO</span>

</label>

</div>

</article>

<!-- Q3.5 -->

<article class="card-quest bg-white p-6 rounded-2xl shadow-md border-4 border-yellow-200">

<span class="inline-block bg-yellow-100 text-yellow-800 text-sm font-extrabold px-3 py-1 rounded-full mb-3">QUESTÃO 5</span>

<h3 class="text-xl font-extrabold text-gray-800 mb-4">OBSERVE A RECICLAGEM DO ALUMÍNIO (PÁGINA 245 DO LIVRO):</h3>

<div class="bg-yellow-50 p-4 rounded-xl border-2 border-yellow-300 flex justify-center mb-6">

<div class="flex items-center gap-2 bg-white p-3 rounded-xl border font-extrabold text-xs text-gray-800">

<span>🥤 LATA USADA</span>

<span></span>

<span>🏭 FÁBRICA</span>

<span></span>

<span>🥤 LATA NOVA</span>

</div>

</div>

<p class="text-lg font-extrabold text-yellow-900 mb-4">AS LATAS USADAS PODEM VIRAR NOVAS LATAS. ISSO SE CHAMA:</p>

<div class="space-y-3 text-lg font-bold">

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-yellow-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-yellow-600 rounded">

<span>[ &nbsp; ] RECICLAGEM</span>

</label>

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-yellow-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-yellow-600 rounded">

<span>[ &nbsp; ] DESPERDÍCIO</span>

</label>

</div>

</article>

<!-- Q3.6 -->

<article class="card-quest bg-white p-6 rounded-2xl shadow-md border-4 border-yellow-200">

<span class="inline-block bg-yellow-100 text-yellow-800 text-sm font-extrabold px-3 py-1 rounded-full mb-3">QUESTÃO 6</span>

<h3 class="text-xl font-extrabold text-gray-800 mb-4">OBSERVE A FOTO DO ATERRO SANITÁRIO (PÁGINA 249 DO LIVRO):</h3>

<div class="bg-yellow-50 p-4 rounded-xl border-2 border-yellow-300 flex justify-center mb-6">

<div class="bg-amber-100 border border-amber-400 p-4 rounded-xl text-center">

<span class="text-3xl block mb-1">🏗️ 🚛 📦</span>

<p class="font-extrabold text-amber-900 text-xs">ATERRO SANITÁRIO: LOCAL SEGURO ONDE É GUARDADO O LIXO QUE NÃO DÁ PRA RECICLAR</p>

</div>

</div>

<p class="text-lg font-extrabold text-yellow-900 mb-4">O ATERRO SANITÁRIO É O LUGAR ONDE SE GUARDA O:</p>

<div class="space-y-3 text-lg font-bold">

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-yellow-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-yellow-600 rounded">

<span>[ &nbsp; ] LIXO DA CIDADE</span>

</label>

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-yellow-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-yellow-600 rounded">

<span>[ &nbsp; ] MATERIAL ESCOLAR</span>

</label>

</div>

</article>

<!-- Q3.7 -->

<article class="card-quest bg-white p-6 rounded-2xl shadow-md border-4 border-yellow-200">

<span class="inline-block bg-yellow-100 text-yellow-800 text-sm font-extrabold px-3 py-1 rounded-full mb-3">QUESTÃO 7</span>

<h3 class="text-xl font-extrabold text-gray-800 mb-4">VEJA A CAPA DO LIVRO (PÁGINA 251 DO LIVRO):</h3>

<div class="bg-yellow-50 p-4 rounded-xl border-2 border-yellow-300 flex justify-center mb-6">

<div class="bg-blue-600 text-white p-4 rounded-xl border-4 border-blue-300 text-center max-w-xs shadow-md">

<p class="text-xs font-bold text-yellow-300">LIVRO INFANTIL</p>

<p class="text-lg font-extrabold my-2">PEDRO PET PLÁSTICO</p>

<span class="text-3xl block">👦 🍾</span>

</div>

</div>

<p class="text-lg font-extrabold text-yellow-900 mb-4">QUAL É O NOME DO MENINO QUE USOU GARRAFAS PET NA HISTÓRIA?</p>

<div class="space-y-3 text-lg font-bold">

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-yellow-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-yellow-600 rounded">

<span>[ &nbsp; ] PEDRO</span>

</label>

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-yellow-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-yellow-600 rounded">

<span>[ &nbsp; ] JOÃO</span>

</label>

</div>

</article>

<!-- Q3.8 -->

<article class="card-quest bg-white p-6 rounded-2xl shadow-md border-4 border-yellow-200">

<span class="inline-block bg-yellow-100 text-yellow-800 text-sm font-extrabold px-3 py-1 rounded-full mb-3">QUESTÃO 8</span>

<h3 class="text-xl font-extrabold text-gray-800 mb-4">OBSERVE AS DICAS DE COMPRAS (PÁGINA 250 DO LIVRO):</h3>

<div class="bg-yellow-50 p-4 rounded-xl border-2 border-yellow-300 flex justify-center mb-6">

<div class="bg-white p-4 rounded-xl border-2 border-green-400 text-center">

<span class="text-4xl block mb-1">🛍️ 🌿</span>

<p class="font-extrabold text-green-800 text-xs">SACOLA REUTILIZÁVEL DE PANO PARA FAZER COMPRAS</p>

</div>

</div>

<p class="text-lg font-extrabold text-yellow-900 mb-4">PARA FAZER COMPRAS CONSCIENTES DEVEMOS LEVAR:</p>

<div class="space-y-3 text-lg font-bold">

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-yellow-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-yellow-600 rounded">

<span>[ &nbsp; ] SACOLA RETORNÁVEL (DE PANO)</span>

</label>

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-yellow-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-yellow-600 rounded">

<span>[ &nbsp; ] MUITAS SACOLAS DESCARTÁVEIS</span>

</label>

</div>

</article>

</section>

<!-- ================= CAPÍTULO 4 ================= -->

<section id="cap4" class="secao-capitulo space-y-8 page-break">

<div class="bg-purple-600 text-white p-4 rounded-2xl shadow-md border-b-8 border-purple-800">

<h2 class="text-2xl font-extrabold">CAPÍTULO 4: DE ONDE VEM?</h2>

<p class="text-sm font-bold opacity-90">PÁGINAS 252 A 262 DO LIVRO DIDÁTICO</p>

</div>

<!-- Q4.1 -->

<article class="card-quest bg-white p-6 rounded-2xl shadow-md border-4 border-purple-200">

<span class="inline-block bg-purple-100 text-purple-800 text-sm font-extrabold px-3 py-1 rounded-full mb-3">QUESTÃO 1</span>

<h3 class="text-xl font-extrabold text-gray-800 mb-4">OBSERVE OS LÁPIS DE COR (PÁGINA 253 DO LIVRO):</h3>

<div class="bg-purple-50 p-4 rounded-xl border-2 border-purple-300 flex justify-center mb-6">

<div class="text-center bg-white p-4 rounded-xl border">

<span class="text-4xl block mb-2">✏️ ✏️ ✏️</span>

<p class="font-extrabold text-xs text-amber-800">PARTE DE FORA: MADEIRA DAS ÁRVORES</p>

</div>

</div>

<p class="text-lg font-extrabold text-purple-900 mb-4">DE QUAL MATERIAL É FEITA A PARTE DE FORA DO LÁPIS?</p>

<div class="space-y-3 text-lg font-bold">

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-purple-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-purple-600 rounded">

<span>[ &nbsp; ] MADEIRA DAS ÁRVORES</span>

</label>

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-purple-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-purple-600 rounded">

<span>[ &nbsp; ] VIDRO</span>

</label>

</div>

</article>

<!-- Q4.2 -->

<article class="card-quest bg-white p-6 rounded-2xl shadow-md border-4 border-purple-200">

<span class="inline-block bg-purple-100 text-purple-800 text-sm font-extrabold px-3 py-1 rounded-full mb-3">QUESTÃO 2</span>

<h3 class="text-xl font-extrabold text-gray-800 mb-4">OBSERVE A MATÉRIA-PRIMA (PÁGINA 254 DO LIVRO):</h3>

<div class="bg-purple-50 p-4 rounded-xl border-2 border-purple-300 flex justify-center mb-6">

<div class="grid grid-cols-3 gap-2 text-center text-xs font-extrabold">

<div class="bg-red-100 p-2 rounded-lg text-red-800">🥩 🥛<br>ANIMAL</div>

<div class="bg-green-100 p-2 rounded-lg text-green-800">🪵 🌳<br>VEGETAL</div>

<div class="bg-gray-200 p-2 rounded-lg text-gray-800">🪨 🧲<br>MINERAL</div>

</div>

</div>

<p class="text-lg font-extrabold text-purple-900 mb-4">LIGUE A MATÉRIA-PRIMA À SUA ORIGEM:</p>

<div class="space-y-3 text-base font-bold">

<div class="flex items-center justify-between p-3 bg-gray-50 rounded-xl border">

<span>CARNE E LEITE</span> <span class="text-red-600"> ORIGEM ANIMAL</span>

</div>

<div class="flex items-center justify-between p-3 bg-gray-50 rounded-xl border">

<span>MADEIRA</span> <span class="text-green-600"> ORIGEM VEGETAL</span>

</div>

<div class="flex items-center justify-between p-3 bg-gray-50 rounded-xl border">

<span>ROCHAS E FERRO</span> <span class="text-purple-600"> ORIGEM MINERAL</span>

</div>

</div>

</article>

<!-- Q4.3 -->

<article class="card-quest bg-white p-6 rounded-2xl shadow-md border-4 border-purple-200">

<span class="inline-block bg-purple-100 text-purple-800 text-sm font-extrabold px-3 py-1 rounded-full mb-3">QUESTÃO 3</span>

<h3 class="text-xl font-extrabold text-gray-800 mb-4">OBSERVE AS FRUTAS E O PÃO (PÁGINAS 254 E 256 DO LIVRO):</h3>

<div class="bg-purple-50 p-4 rounded-xl border-2 border-purple-300 flex justify-center mb-6">

<div class="bg-amber-100 border-2 border-amber-400 p-4 rounded-xl text-center">

<span class="text-4xl block mb-1">🌾 🥖</span>

<p class="font-extrabold text-amber-900 text-xs">PÃO PREPARADO E TRANSFORMADO NA PADARIA</p>

</div>

</div>

<p class="text-lg font-extrabold text-purple-900 mb-4">O PÃO É UM ALIMENTO TRANSFORMADO NA PADARIA. ELE É:</p>

<div class="space-y-3 text-lg font-bold">

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-purple-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-purple-600 rounded">

<span>[ &nbsp; ] MANUFATURADO</span>

</label>

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-purple-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-purple-600 rounded">

<span>[ &nbsp; ] RETIRADO DIRETO DA ÁRVORE</span>

</label>

</div>

</article>

<!-- Q4.4 -->

<article class="card-quest bg-white p-6 rounded-2xl shadow-md border-4 border-purple-200">

<span class="inline-block bg-purple-100 text-purple-800 text-sm font-extrabold px-3 py-1 rounded-full mb-3">QUESTÃO 4</span>

<h3 class="text-xl font-extrabold text-gray-800 mb-4">OBSERVE A CADEIA DO PNEU (PÁGINA 255 DO LIVRO):</h3>

<div class="bg-purple-50 p-4 rounded-xl border-2 border-purple-300 flex justify-center mb-6">

<div class="flex items-center gap-2 bg-white p-3 rounded-xl border text-xs font-extrabold">

<span>🌳 SERINGUEIRA</span>

<span></span>

<span>🛢️ BORRACHA</span>

<span></span>

<span>🛞 PNEU</span>

</div>

</div>

<p class="text-lg font-extrabold text-purple-900 mb-4">QUAL É A MATÉRIA-PRIMA USADA PARA FAZER O PNEU?</p>

<div class="space-y-3 text-lg font-bold">

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-purple-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-purple-600 rounded">

<span>[ &nbsp; ] BORRACHA (SERINGUEIRA)</span>

</label>

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-purple-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-purple-600 rounded">

<span>[ &nbsp; ] PAPEL</span>

</label>

</div>

</article>

<!-- Q4.5 -->

<article class="card-quest bg-white p-6 rounded-2xl shadow-md border-4 border-purple-200">

<span class="inline-block bg-purple-100 text-purple-800 text-sm font-extrabold px-3 py-1 rounded-full mb-3">QUESTÃO 5</span>

<h3 class="text-xl font-extrabold text-gray-800 mb-4">OBSERVE OS MAPAS DA MATA ATLÂNTICA (PÁGINA 257 DO LIVRO):</h3>

<div class="bg-purple-50 p-4 rounded-xl border-2 border-purple-300 flex justify-center mb-6">

<div class="grid grid-cols-2 gap-4 text-center">

<div class="bg-white p-3 rounded-xl border-2 border-green-500">

<span class="text-xs font-extrabold text-green-700 block mb-1">(A) MATA ANTIGA</span>

<div class="w-full h-12 bg-green-500 rounded-lg flex items-center justify-center text-white font-extrabold text-xs">MUITA MATA VERDE</div>

</div>

<div class="bg-white p-3 rounded-xl border-2 border-red-400">

<span class="text-xs font-extrabold text-red-600 block mb-1">(B) MATA ATUAL</span>

<div class="w-full h-12 bg-gray-200 rounded-lg flex items-center justify-center text-red-600 font-extrabold text-xs">POUCO VERDE RESTANTE</div>

</div>

</div>

</div>

<p class="text-lg font-extrabold text-purple-900 mb-4">O QUE ACONTECEU COM A COR VERDE DO MAPA AO LONGO DO TEMPO?</p>

<div class="space-y-3 text-lg font-bold">

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-purple-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-purple-600 rounded">

<span>[ &nbsp; ] DIMINUIU (A FLORESTA FOI DESMATADA)</span>

</label>

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-purple-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-purple-600 rounded">

<span>[ &nbsp; ] AUMENTOU (A FLORESTA CRESCEU)</span>

</label>

</div>

</article>

<!-- Q4.6 -->

<article class="card-quest bg-white p-6 rounded-2xl shadow-md border-4 border-purple-200">

<span class="inline-block bg-purple-100 text-purple-800 text-sm font-extrabold px-3 py-1 rounded-full mb-3">QUESTÃO 6</span>

<h3 class="text-xl font-extrabold text-gray-800 mb-4">OBSERVE AS FOTOS DO TRABALHO NO CAMPO (PÁGINA 258 DO LIVRO):</h3>

<div class="bg-purple-50 p-4 rounded-xl border-2 border-purple-300 flex justify-center mb-6">

<div class="bg-white p-4 rounded-xl border text-center">

<span class="text-4xl block mb-1">🐄 🐄 🥛</span>

<p class="font-extrabold text-xs text-gray-800">CRIAÇÃO DE VACAS PARA PRODUÇÃO DE LEITE</p>

</div>

</div>

<p class="text-lg font-extrabold text-purple-900 mb-4">A CRIAÇÃO DE VACAS PARA PRODUZIR LEITE CHAMA-SE:</p>

<div class="space-y-3 text-lg font-bold">

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-purple-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-purple-600 rounded">

<span>[ &nbsp; ] PECUÁRIA</span>

</label>

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-purple-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-purple-600 rounded">

<span>[ &nbsp; ] MINERAÇÃO</span>

</label>

</div>

</article>

<!-- Q4.7 -->

<article class="card-quest bg-white p-6 rounded-2xl shadow-md border-4 border-purple-200">

<span class="inline-block bg-purple-100 text-purple-800 text-sm font-extrabold px-3 py-1 rounded-full mb-3">QUESTÃO 7</span>

<h3 class="text-xl font-extrabold text-gray-800 mb-4">OBSERVE A FOTO DAS QUEIMADAS (PÁGINA 259 DO LIVRO):</h3>

<div class="bg-purple-50 p-4 rounded-xl border-2 border-purple-300 flex justify-center mb-6">

<div class="bg-red-100 border-2 border-red-500 p-4 rounded-xl text-center">

<span class="text-4xl block mb-1">🔥 🪵 💨</span>

<p class="font-extrabold text-red-800 text-xs">FOGO NA MATA E DESTRUIÇÃO DAS ÁRVORES</p>

</div>

</div>

<p class="text-lg font-extrabold text-purple-900 mb-4">DESTRUIR AS FLORESTAS É UMA ATITUDE:</p>

<div class="space-y-3 text-lg font-bold">

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-purple-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-purple-600 rounded">

<span>[ &nbsp; ] RUIM PARA A NATUREZA</span>

</label>

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-purple-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-purple-600 rounded">

<span>[ &nbsp; ] BOA PARA OS ANIMAIS</span>

</label>

</div>

</article>

<!-- Q4.8 -->

<article class="card-quest bg-white p-6 rounded-2xl shadow-md border-4 border-purple-200">

<span class="inline-block bg-purple-100 text-purple-800 text-sm font-extrabold px-3 py-1 rounded-full mb-3">QUESTÃO 8</span>

<h3 class="text-xl font-extrabold text-gray-800 mb-4">OBSERVE OS EMOJIS (PÁGINAS 259 E 262 DO LIVRO):</h3>

<div class="bg-purple-50 p-4 rounded-xl border-2 border-purple-300 flex justify-center mb-6">

<div class="grid grid-cols-2 gap-4 text-center">

<div class="bg-green-100 p-3 rounded-xl border border-green-400">

<span class="text-4xl block mb-1">🙂</span>

<p class="font-extrabold text-green-800 text-xs">HAPPY / FELIZ</p>

</div>

<div class="bg-red-100 p-3 rounded-xl border border-red-400">

<span class="text-4xl block mb-1">🙁</span>

<p class="font-extrabold text-red-800 text-xs">SAD / TRISTE</p>

</div>

</div>

</div>

<p class="text-lg font-extrabold text-purple-900 mb-4">COMO VOCÊ SE SENTE QUANDO VÊ UMA FLORESTA BEM CUIDADA E PROTEGIDA?</p>

<div class="space-y-3 text-lg font-bold">

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-purple-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-purple-600 rounded">

<span>[ &nbsp; ] HAPPY / FELIZ 🙂</span>

</label>

<label class="flex items-center gap-3 p-3 rounded-xl border-2 border-gray-300 hover:bg-purple-50 cursor-pointer">

<input type="checkbox" class="w-7 h-7 text-purple-600 rounded">

<span>[ &nbsp; ] SAD / TRISTE 🙁</span>

</label>

</div>

</article>

</section>

</main>

<footer class="max-w-4xl mx-auto mt-12 p-6 bg-white rounded-2xl shadow-md border-2 border-gray-300 text-center text-xs text-gray-500 font-bold">

RECURSO DIDÁTICO ADAPTADO PARA ATENDIMENTO EDUCACIONAL ESPECIALIZADO (AEE / TEA) • 2026

</footer>

<script>

function filtrar(capId) {

const secoes = document.querySelectorAll('.secao-capitulo');

if (capId === 'todos') {

secoes.forEach(s => s.style.display = 'block');

} else {

secoes.forEach(s => {

s.style.display = (s.id === capId) ? 'block' : 'none';

});

}

}

</script>

</body>

</html>

Hospedagem direta para seu HTML puro. Zero bloat, zero configurações, apenas seu código rodando na rede edge global com fidelidade pixel-perfect.

Fluxo Simples

Sua Marcação, Live em Três Passos

01
02
03

Cole seu HTML

Vincule seu Domínio

Execute na Edge

Insira seu código HTML, CSS e JS estático diretamente em nosso painel. Sem builds, sem dependências.

Conecte seu domínio personalizado em segundos. Nossa infraestrutura edge garante acesso global imediato.

Seu site é distribuído globalmente em nossa rede edge, garantindo latência mínima e máxima performance.

Métricas Reais

Fidelidade e Velocidade Incomparáveis

100%

Fidelidade de Código

0ms

Tempo de Build

18ms

Latência Média Mundial

Sua Visão. Seu Código. Sua Publicação.

Pare de lutar contra frameworks inchados. Publique seu HTML puro, exatamente como você o escreveu.