<!doctype html>

<html lang="pt-BR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Aerojato | Equipamentos profissionais de pintura</title>

<meta name="description" content="Aerojato Equipamentos de Pintura — equipamentos profissionais para pintura, acabamento e aplicações de precisão.">
<meta name="theme-color" content="#006ce8">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">

<link rel="stylesheet" href="styles.css">
</head>

<body>

<div class="topbar">
  <div class="container topbar-inner">
    <span>Atendimento especializado</span>

```
<span>
  WhatsApp:
  <a href="https://wa.me/5511994501970">
    (11) 99450-1970
  </a>
</span>

<span>Equipamentos para pintura e acabamento</span>
```

  </div>
</div>

<header class="header">

  <div class="container header-main">

```
<button class="icon-btn mobile-menu" aria-label="Abrir menu">
  ☰
</button>

<a class="brand" href="#inicio" aria-label="Aerojato início">
  <img
    src="assets/logo.png"
    alt="Aerojato Equipamentos de Pintura">
</a>

<div class="search">

  <span>⌕</span>

  <input
    id="headerSearch"
    type="search"
    placeholder="O que você procura? Ex.: MP-560, pistola, aerógrafo..."
    aria-label="Pesquisar produtos">

  <button id="searchBtn">
    Buscar
  </button>

</div>

<div class="header-actions">

  <a href="#contato" class="action">
    <b>◉</b>
    <small>Atendimento</small>
  </a>

  <a
    href="https://wa.me/5511994501970"
    class="action">
    <b>◌</b>
    <small>WhatsApp</small>
  </a>

  <button class="action" id="favBtn">
    <b>♡</b>
    <small>Favoritos</small>
  </button>

  <button class="action cart-trigger">
    <b>🛒</b>
    <small>
      Carrinho
      <i id="cartCount">0</i>
    </small>
  </button>

</div>
```

  </div>

  <nav class="nav">

```
<div class="container nav-inner">

  <div class="nav-item products-menu">

    <a href="#catalogo">
      PRODUTOS <span>⌄</span>
    </a>

    <div class="mega">

      <div>

        <strong>Pistolas de pintura</strong>

        <a data-filter="Pistolas de Pintura">MP-105</a>
        <a data-filter="Pistolas de Pintura">MP-201</a>
        <a data-filter="Pistolas de Pintura">MP-560</a>
        <a data-filter="Pistolas de Pintura">MP-21 / MP-22</a>
        <a data-filter="Pistolas de Pintura">MP-350 / MP-570</a>

      </div>

      <div>

        <strong>Aerógrafos</strong>

        <a data-filter="Aerógrafos">MP-1002</a>
        <a data-filter="Aerógrafos">MP-1003</a>
        <a data-filter="Aerógrafos">MP-1004</a>
        <a data-filter="Aerógrafos">MP-1005</a>

      </div>

      <div>

        <strong>Equipamentos</strong>

        <a data-filter="Equipamentos">LXMP-700</a>
        <a data-filter="Equipamentos">MP-260</a>
        <a data-filter="Equipamentos">MP-610</a>

      </div>

      <div>

        <strong>Outros</strong>

        <a data-filter="Acessórios">BLMP-1</a>
        <a data-filter="Pistolas de Pintura">VD-201</a>
        <a data-filter="Pistolas de Pintura">VD-250</a>

      </div>

    </div>

  </div>

  <a href="#inicio">INÍCIO</a>
  <a href="#departamentos">DEPARTAMENTOS</a>
  <a href="#destaques">DESTAQUES</a>
  <a href="#aerojato">AEROJATO</a>
  <a href="#suporte">SUPORTE</a>
  <a href="#contato">CONTATO</a>

</div>
```

  </nav>

</header>

<main>

<section id="inicio" class="hero">

  <div class="hero-grid"></div>

  <div class="container hero-inner">

```
<div class="hero-copy">

  <div class="eyebrow">
    <span></span>
    TECNOLOGIA • PRECISÃO • ACABAMENTO
  </div>

  <h1>
    Equipamentos profissionais para
    <em>pintura</em> e acabamento.
  </h1>

  <p>
    Precisão, tecnologia e desempenho para transformar cada aplicação em um acabamento profissional.
  </p>

  <div class="hero-actions">

    <a class="btn primary" href="#catalogo">
      Conheça nossos produtos
      <span>→</span>
    </a>

    <a
      class="btn ghost"
      href="https://wa.me/5511994501970?text=Ol%C3%A1!%20Gostaria%20de%20falar%20com%20um%20especialista%20da%20Aerojato.">
      Fale com um especialista
    </a>

  </div>

  <div class="hero-note">

    <b>17</b>
    <span>modelos disponíveis no catálogo</span>

    <i></i>

    <b>AEROJATO</b>
    <span>equipamentos para pintura e acabamento</span>

  </div>

</div>


<div class="hero-art">

  <div class="ring"></div>

  <img
    src="assets/products/mp560-0.png"
    alt="Equipamento Aerojato MP-560">

  <div class="floating">
    <b>MP-560</b>
    <span>Conheça o equipamento</span>
  </div>

</div>
```

  </div>

</section>

<section class="trust">

  <div class="container trust-grid">

```
<div>
  <b>✦ PRECISÃO</b>
  <span>Equipamentos para alto desempenho.</span>
</div>

<div>
  <b>◈ QUALIDADE</b>
  <span>Produtos selecionados para aplicações profissionais.</span>
</div>

<div>
  <b>◉ ATENDIMENTO</b>
  <span>Suporte rápido e especializado.</span>
</div>

<div>
  <b>✧ AEROJATO</b>
  <span>Soluções para pintura e acabamento.</span>
</div>
```

  </div>

</section>

<section id="departamentos" class="section departments">

  <div class="container">

```
<div class="section-head">

  <div>
    <span class="kicker">EXPLORE POR CATEGORIA</span>
    <h2>Encontre o equipamento ideal.</h2>
  </div>

  <p>
    Uma seleção organizada para você encontrar com rapidez a solução certa para sua aplicação.
  </p>

</div>


<div class="dept-grid">

  <button
    class="dept large"
    data-filter="Pistolas de Pintura">

    <div class="dept-icon">◈</div>

    <div>
      <span>01</span>
      <h3>Pistolas de Pintura</h3>
      <p>Precisão e acabamento profissional.</p>
    </div>

    <b>↗</b>

  </button>


  <button
    class="dept"
    data-filter="Aerógrafos">

    <div class="dept-icon">✦</div>

    <span>02</span>

    <h3>Aerógrafos</h3>

    <p>
      Detalhes e aplicações de alta precisão.
    </p>

    <b>↗</b>

  </button>


  <button
    class="dept"
    data-filter="Equipamentos">

    <div class="dept-icon">⚙</div>

    <span>03</span>

    <h3>Compressores</h3>

    <p>
      Potência para suas aplicações.
    </p>

    <b>↗</b>

  </button>


  <button
    class="dept"
    data-filter="Equipamentos">

    <div class="dept-icon">▣</div>

    <span>04</span>

    <h3>Equipamentos</h3>

    <p>
      Soluções para diferentes necessidades.
    </p>

    <b>↗</b>

  </button>


  <button
    class="dept"
    data-filter="Acessórios">

    <div class="dept-icon">⌁</div>

    <span>05</span>

    <h3>Acessórios</h3>

    <p>
      Complementos para seu equipamento.
    </p>

    <b>↗</b>

  </button>

</div>
```

  </div>

</section>

<section id="destaques" class="section featured">

  <div class="container">

```
<div class="section-head">

  <div>
    <span class="kicker">CATÁLOGO SELECIONADO</span>
    <h2>Produtos em destaque.</h2>
  </div>

  <a href="#catalogo" class="text-link">
    Ver catálogo completo →
  </a>

</div>

<div id="featuredGrid" class="product-grid"></div>
```

  </div>

</section>

<section class="dark-band">

  <div class="container dark-band-inner">

```
<div>

  <span class="kicker light">
    PARA CADA APLICAÇÃO
  </span>

  <h2>
    Mais controle. Mais precisão.
    <span>Melhor acabamento.</span>
  </h2>

</div>

<p>
  Escolha equipamentos pensados para diferentes necessidades de pintura, acabamento e detalhe.
</p>
```

  </div>

</section>

<section id="catalogo" class="section catalog">

  <div class="container">

```
<div class="section-head">

  <div>
    <span class="kicker">AEROJATO</span>
    <h2>Catálogo completo.</h2>
  </div>

  <p>
    Pesquise por nome ou código e filtre por categoria.
    <b>Sem preços por enquanto:</b>
    solicite informações diretamente à equipe.
  </p>

</div>


<div class="catalog-tools">

  <div class="catalog-search">

    ⌕

    <input
      id="catalogSearch"
      type="search"
      placeholder="Pesquisar por nome, código ou categoria..."
      aria-label="Pesquisar catálogo">

  </div>


  <div class="filters" id="filters">

    <button class="active" data-filter="Todos">
      Todos
    </button>

    <button data-filter="Pistolas de Pintura">
      Pistolas
    </button>

    <button data-filter="Aerógrafos">
      Aerógrafos
    </button>

    <button data-filter="Equipamentos">
      Equipamentos
    </button>

    <button data-filter="Acessórios">
      Acessórios
    </button>

  </div>


  <select id="sort">

    <option value="featured">
      Ordenar: destaque
    </option>

    <option value="code">
      Código A–Z
    </option>

    <option value="codeDesc">
      Código Z–A
    </option>

  </select>

</div>


<div
  id="catalogGrid"
  class="product-grid">
</div>


<div
  id="empty"
  class="empty hidden">

  Nenhum produto encontrado.
  Tente outro termo.

</div>
```

  </div>

</section>

<section id="aerojato" class="section about">

  <div class="container about-grid">

```
<div class="about-visual">

  <div class="about-line"></div>

  <img
    src="assets/products/mp105-0.png"
    alt="Equipamento Aerojato MP-105">

  <div class="about-badge">

    <strong>AEROJATO</strong>

    <span>
      Equipamentos de pintura
    </span>

  </div>

</div>


<div class="about-copy">

  <span class="kicker light">
    SOBRE A MARCA
  </span>

  <h2>
    A Aerojato.
    <br>
    <span>Precisão em cada aplicação.</span>
  </h2>

  <p>
    A Aerojato reúne equipamentos e acessórios para pintura e acabamento, oferecendo soluções para profissionais e diferentes aplicações.
  </p>

  <p class="muted-light">
    Uma experiência de catálogo criada para apresentar os equipamentos de forma clara, profissional e orientada à escolha.
  </p>

  <a
    href="#contato"
    class="btn light-btn">

    Conheça a Aerojato →

  </a>

</div>
```

  </div>

</section>

<section id="suporte" class="section applications">

  <div class="container">

```
<div class="section-head">

  <div>

    <span class="kicker">
      SOLUÇÕES
    </span>

    <h2>
      Feito para diferentes aplicações.
    </h2>

  </div>

  <p>
    Encontre uma categoria e avance para o catálogo.
  </p>

</div>


<div class="application-grid">

  <article>

    <span>01</span>

    <h3>Automotivo</h3>

    <p>
      Equipamentos para aplicações que exigem controle e acabamento.
    </p>

    <a
      href="#catalogo"
      data-filter-link="Pistolas de Pintura">
      Explorar →
    </a>

  </article>


  <article>

    <span>02</span>

    <h3>Marcenaria</h3>

    <p>
      Soluções para cobertura, acabamento e detalhes.
    </p>

    <a
      href="#catalogo"
      data-filter-link="Pistolas de Pintura">
      Explorar →
    </a>

  </article>


  <article>

    <span>03</span>

    <h3>Indústria</h3>

    <p>
      Equipamentos para diferentes processos e necessidades.
    </p>

    <a
      href="#catalogo"
      data-filter-link="Equipamentos">
      Explorar →
    </a>

  </article>


  <article>

    <span>04</span>

    <h3>Detalhe &amp; Hobby</h3>

    <p>
      Aerografia e aplicações que pedem precisão.
    </p>

    <a
      href="#catalogo"
      data-filter-link="Aerógrafos">
      Explorar →
    </a>

  </article>

</div>
```

  </div>

</section>

<section class="cta">

  <div class="container cta-inner">

```
<div>

  <span class="kicker light">
    ATENDIMENTO AEROJATO
  </span>

  <h2>
    Precisa de ajuda para escolher?
  </h2>

  <p>
    Nossa equipe está pronta para ajudar você a encontrar o equipamento ideal para sua aplicação.
  </p>

</div>


<div class="cta-actions">

  <a
    class="btn primary"
    href="https://wa.me/5511994501970?text=Ol%C3%A1!%20Preciso%20de%20ajuda%20para%20escolher%20um%20equipamento%20Aerojato.">

    Falar no WhatsApp

  </a>


  <a
    class="btn outline-white"
    href="#contato">

    Solicitar atendimento

  </a>

</div>
```

  </div>

</section>

<section class="section content">

  <div class="container">

```
<div class="section-head">

  <div>

    <span class="kicker">
      CONTEÚDO AEROJATO
    </span>

    <h2>
      Conhecimento para escolher melhor.
    </h2>

  </div>

  <span class="pill">
    EM BREVE
  </span>

</div>


<div class="content-grid">

  <article>

    <span>GUIA</span>

    <h3>
      Como escolher uma pistola de pintura
    </h3>

    <p>
      Área preparada para publicação de conteúdo técnico.
    </p>

    <b>
      Em breve →
    </b>

  </article>


  <article>

    <span>GUIA</span>

    <h3>
      Como escolher um compressor
    </h3>

    <p>
      Área preparada para publicação de conteúdo técnico.
    </p>

    <b>
      Em breve →
    </b>

  </article>


  <article>

    <span>GUIA</span>

    <h3>
      Guia de aerografia
    </h3>

    <p>
      Área preparada para publicação de conteúdo técnico.
    </p>

    <b>
      Em breve →
    </b>

  </article>


  <article>

    <span>CUIDADOS</span>

    <h3>
      Cuidados com equipamentos de pintura
    </h3>

    <p>
      Área preparada para publicação de conteúdo técnico.
    </p>

    <b>
      Em breve →
    </b>

  </article>

</div>
```

  </div>

</section>

<section id="contato" class="contact">

  <div class="container contact-grid">

```
<div>

  <span class="kicker light">
    FALE COM A AEROJATO
  </span>

  <h2>
    Vamos encontrar a solução certa para você.
  </h2>

  <p>
    Entre em contato para informações sobre produtos, aplicações e atendimento.
  </p>

</div>


<div class="contact-card">

  <a href="https://wa.me/5511994501970">

    <span>
      WhatsApp
    </span>

    <strong>
      (11) 99450-1970
    </strong>

    <small>
      Conversar com a equipe →
    </small>

  </a>


  <div>

    <span>
      Atendimento
    </span>

    <strong>
      Solicite suporte
    </strong>

    <small>
      Resposta pelo WhatsApp
    </small>

  </div>

</div>
```

  </div>

</section>

</main>

<footer>

  <div class="container footer-grid">

```
<div class="footer-brand">

  <img
    src="assets/logo.png"
    alt="Aerojato">

  <p>
    Equipamentos profissionais para pintura e acabamento.
  </p>

  <a href="https://wa.me/5511994501970">
    (11) 99450-1970
  </a>

</div>


<div>

  <h4>PRODUTOS</h4>

  <a
    href="#catalogo"
    data-filter-link="Pistolas de Pintura">
    Pistolas
  </a>

  <a
    href="#catalogo"
    data-filter-link="Aerógrafos">
    Aerógrafos
  </a>

  <a
    href="#catalogo"
    data-filter-link="Equipamentos">
    Compressores
  </a>

  <a
    href="#catalogo"
    data-filter-link="Equipamentos">
    Equipamentos
  </a>

  <a
    href="#catalogo"
    data-filter-link="Acessórios">
    Acessórios
  </a>

</div>


<div>

  <h4>ATENDIMENTO</h4>

  <a href="https://wa.me/5511994501970">
    WhatsApp
  </a>

  <a href="#contato">
    Contato
  </a>

  <a href="#suporte">
    Suporte
  </a>

</div>


<div>

  <h4>INSTITUCIONAL</h4>

  <a href="#aerojato">
    Sobre a Aerojato
  </a>

  <a href="#contato">
    Contato
  </a>

  <a href="#privacidade">
    Política de Privacidade
  </a>

  <a href="#termos">
    Termos
  </a>

</div>
```

  </div>

  <div class="container copyright">

```
<span>
  © 2026 Aerojato Equipamentos de Pintura
</span>

<span>
  Todos os direitos reservados.
</span>
```

  </div>

</footer>

<button
class="whatsapp"
aria-label="Falar no WhatsApp"
onclick="location.href='https://wa.me/5511994501970?text=Ol%C3%A1!%20Gostaria%20de%20falar%20com%20a%20Aerojato.'">

◔

  <span>
    WhatsApp
  </span>

</button>

<div
  class="overlay"
  id="overlay">
</div>

<aside
  class="cart"
  id="cart">

  <div class="cart-head">

```
<div>

  <span>
    CARRINHO
  </span>

  <h3>
    Produtos selecionados
  </h3>

</div>

<button
  id="closeCart"
  aria-label="Fechar carrinho">

  ×

</button>
```

  </div>

  <div
    id="cartItems"
    class="cart-items">
  </div>

  <div class="cart-foot">

```
<p>
  Os preços ainda não estão disponíveis.
  Sua lista será enviada para a equipe.
</p>

<button
  class="btn primary full"
  id="sendCart">

  Enviar lista pelo WhatsApp →

</button>
```

  </div>

</aside>

<div
  class="modal hidden"
  id="productModal">

  <div class="modal-box">

```
<button
  class="modal-close"
  id="closeModal"
  aria-label="Fechar produto">

  ×

</button>


<div class="modal-gallery">

  <img
    id="modalImage"
    alt="Imagem do produto">

  <div id="thumbs"></div>

</div>


<div class="modal-info">

  <span
    class="kicker"
    id="modalCategory">
  </span>


  <h2 id="modalName"></h2>


  <div
    class="code"
    id="modalCode">
  </div>


  <p>
    Produto Aerojato disponível para consulta.
    Solicite informações à nossa equipe sobre aplicação,
    disponibilidade e detalhes técnicos.
  </p>


  <div class="tech">

    <div>

      <span>
        Categoria
      </span>

      <b id="modalCat2"></b>

    </div>


    <div>

      <span>
        Código
      </span>

      <b id="modalCode2"></b>

    </div>


    <div>

      <span>
        Preço
      </span>

      <b>
        Consultar
      </b>

    </div>

  </div>


  <div class="modal-actions">

    <button
      class="btn primary"
      id="addModal">

      Adicionar ao carrinho

    </button>


    <a
      class="btn outline"
      id="modalWhats">

      Solicitar pelo WhatsApp →

    </a>

  </div>

</div>
```

  </div>

</div>

<script src="app.js"></script>

</body>
</html>
