ChatGPT
























logo-ideia-do-veio_700k(1).png
LucasPesca (4).jpg
colocaressas imagens a logo é essa 1 



ontem 22:59













WhatsApp Image 2026-07-13 at 20.10.10(5).jpeg
WhatsApp Image 2026-07-14 at 23.31.58.jpeg
WhatsApp Image 2026-07-14 at 23.31.59.jpeg
WhatsApp Image 2026-07-14 at 23.31.59(1).jpeg
WhatsApp Image 2026-07-14 at 23.31.59(2).jpeg
WhatsApp Image 2026-07-14 at 23.31.59(3).jpeg
WhatsApp Image 2026-07-14 at 23.31.59(4).jpeg
WhatsApp Image 2026-07-14 at 23.31.59(5).jpeg
WhatsApp Image 2026-07-14 at 23.32.00.jpeg
WhatsApp Image 2026-07-14 at 23.32.00(1).jpeg

WhatsApp Video 2026-07-14 at 23.27.36(1).mp4
Arquivo

hoje 10:09





























tem como colcoar aqui que proteger a vara tbm no transporte e armazenamento 

Imagem gerada: Chumbafix: organização e proteção para pescadores


Editar








como eu crio a pasta pra colcoar aqui 



fiz tudo mais ainda nao atualizou

Imagem gerada: Emblema de patente requerida


Editar


Consigo, mas não consigo reconstruir fielmente o HTML inteiro a partir do contexto da conversa.

O HTML da sua página já foi sendo alterado diversas vezes (cards, vídeo, galeria, FAQ, WhatsApp, cuidados, etc.). Se eu gerar um HTML completo agora, vou acabar sobrescrevendo funcionalidades que você já adicionou ou removendo partes do layout.

A forma correta é editar o seu arquivo atual.

O que preciso
Como agora estamos trabalhando pelo GitHub, faça uma destas duas opções:

A melhor: envie aqui o arquivo index.html do seu repositório (arraste e solte o arquivo na conversa).

Ou copie e cole o conteúdo do index.html aqui (se preferir).

Assim eu devolvo:

✅ o HTML completo atualizado;

✅ selo PATENTE REQUERIDA já integrado;

✅ proteção da vara no card;

✅ seção de cuidados melhorada;

✅ código organizado e pronto para subir no GitHub.

Dessa forma você só substitui o arquivo e faz um único commit, sem perder nada do que já está funcionando.



Código colado(7).html
Arquivo

Analisei o HTML que você enviou. 


O projeto está muito bom e organizado. A partir daqui, eu não faria mais alterações grandes no index.html. Em vez disso, evoluiria o site por módulos.

O que eu incluiria imediatamente
1. Selo de Patente (logo abaixo do título principal)
Substitua este trecho:

<div class="eyebrow">🎣 Produto exclusivo para pescadores</div>
<h1>Organize seus chicotes em <span>segundos.</span></h1>
<p class="lead">
O ChumbaFix mantém chicotes, anzóis e chumbadas organizados e presos à vara,
deixando o transporte mais prático e seguro.
</p>
por:

<div class="eyebrow">🎣 Produto exclusivo para pescadores</div>

<h1>
Organize seus chicotes em
<span>segundos.</span>
</h1>

<div class="patente-box">

<div class="patente-badge">

🛡️ PATENTE REQUERIDA

</div>

<div class="patente-sub">

Pedido de Patente (Modelo de Utilidade)

</div>

<div class="patente-number">

BR 20 2026 016452-1

</div>

</div>

<p class="lead">

O ChumbaFix mantém chicotes, anzóis, chumbadas e também protege a vara durante o transporte e armazenamento.

</p>
CSS
Cole antes do último @media:

.patente-box{

display:inline-flex;

flex-direction:column;

margin:28px 0;

padding:18px 24px;

background:linear-gradient(145deg,#1b1b1b,#111);

border:1px solid #d7a322;

border-radius:18px;

box-shadow:

0 0 35px rgba(244,169,0,.18);

}

.patente-badge{

font-size:20px;

font-weight:900;

color:#FFD56A;

letter-spacing:.8px;

margin-bottom:6px;

}

.patente-sub{

font-size:14px;

color:#d7d7d7;

}

.patente-number{

margin-top:6px;

font-size:16px;

font-weight:800;

color:white;

letter-spacing:1px;

}
Eu faria mais algumas melhorias
Hero
Em vez de apenas o vídeo:

Produto
★★★★★ 4.9

+350 clientes

Patente requerida

Frete para todo Brasil

Personalização disponível
Logo abaixo
Adicionar uma barra de confiança:

🚚 Enviamos para todo Brasil

🔒 Compra segura

🛡️ Patente requerida

⭐ Produção própria

🎣 Desenvolvido por pescador
Galeria
Ao clicar na foto:

Zoom

← →

Fullscreen

Baixar imagem

Compartilhar
Antes do formulário
Adicionar um bloco enorme

Por que escolher o ChumbaFix?
com

✔ evita embaraços

✔ protege a vara

✔ protege anzóis

✔ protege linhas

✔ protege chumbadas

✔ ocupa pouco espaço

✔ personalizável

✔ desenvolvido no Brasil
Avaliações
★★★★★

Lucas Pesca

"Melhor acessório que já usei."

★★★★★

Batman Guia

"Não fico mais sem."

★★★★★

Náutica Diniz

"Todos os clientes elogiam."
Carrinho
Trocar o formulário por um carrinho verdadeiro.

Qtd [+]

Cor

Personalização

Frete

Subtotal

Comprar

PIX

WhatsApp
Minha sugestão
Não faria mais alterações diretamente nesse arquivo gigante.

Seu index.html já está com cerca de 500 linhas. 


O próximo passo seria transformar o projeto em uma estrutura profissional:

index.html
css/
    style.css

js/
    app.js
    galeria.js
    carrinho.js
    parceiros.js
    frete.js

assets/
Isso vai facilitar muito a evolução do site.

Acho que conseguimos transformar essa página em um e-commerce com aparência de produto premium, incluindo carrinho, cálculo de frete, pagamento por PIX, cupons de parceiros, painel de pedidos e um visual no nível de marcas como Apple ou DJI, sem perder a simplicidade do projeto.


quero completo o codigo

Pronto. Atualizei o seu HTML completo, preservando a página atual e incluindo:

selo PATENTE REQUERIDA;

número BR 20 2026 016452-1;

informação de que o pedido está em análise no INPI;

card alterado para Proteção completa;

proteção da vara durante transporte e armazenamento.

Arquivos
index.html

Baixar pacote completo em ZIP

No GitHub, substitua o index.html atual por esse arquivo e faça Commit + Sync/Push. 



hoje 8:41
62b0632d-8852-4e22-9ca5-f8a6a5bb1655.png
video ta cortando como podemos ajustar?

Sim. Na verdade, o problema não é o vídeo. É o CSS.

Você está usando:

.hero-media video{
    width:100%;
    height:620px;
    object-fit:cover;
}
O object-fit: cover sempre corta parte do vídeo para preencher toda a área, exatamente como acontece na sua imagem.

Eu faria diferente
Como o vídeo é um vídeo demonstrativo do produto, é mais importante mostrar ele inteiro do que preencher toda a área.

Troque por:

.hero-media video{
    width:100%;
    height:620px;
    object-fit:contain;
    background:#111;
}
Assim ele aparecerá inteiro.

Melhor ainda (minha recomendação)
Deixe o vídeo em um fundo escuro igual a Apple faz.

.hero-media{

    background:#000;

    display:flex;

    justify-content:center;

    align-items:center;

}
e

.hero-media video{

    width:100%;

    height:620px;

    object-fit:contain;

}
O resultado será:

██████████████████████

        VIDEO

██████████████████████
sem cortar absolutamente nada.

Melhor ainda ainda 😄
Pela imagem que você me mostrou, eu faria um layout muito mais premium.

Ao invés do vídeo ocupar metade da tela:

Texto          Vídeo
Eu faria igual a DJI / Apple:

--------------------------------

        VIDEO GRANDE

--------------------------------

ChumbaFix

Texto

Botão Comprar
Ou então:

           VIDEO

     CHUMBAFIX

Feito para resolver...

Comprar
O produto fica gigantesco na tela e transmite muito mais valor.

Outra observação importante
O seu vídeo é vertical (9:16).

Você está colocando ele dentro de um espaço praticamente quadrado.

Isso nunca vai ficar perfeito.

Minha sugestão seria gravar outro vídeo em:

16:9 (horizontal), ou

4:5 (Instagram).

Enquanto isso não acontece, use:

object-fit: contain;
É a melhor solução para preservar o vídeo inteiro.

Eu ainda iria um passo além: transformaria essa abertura em uma seção de impacto com vídeo em tela cheia, animações suaves e botões flutuantes, deixando a página com aparência de produto premium. Acho que esse tipo de apresentação combina muito mais com o ChumbaFix e tende a aumentar a conversão.


9203996c-4ffa-46dc-88ec-08c7e06ca878.png

Achei o problema.

Você tem duas regras CSS para o vídeo, e a segunda está sobrescrevendo a primeira.

Na sua imagem aparecem estas duas:

.hero-media video{
    width:100%;
    height:620px;
    object-fit:cover;
}
e lá embaixo:

.hero-media video{
    height:520px;
}
Depois, no @media, ainda existe:

.hero-media video{
    height:430px;
}
Faça assim
Substitua a primeira por:

.hero-media video{
    width:100%;
    max-height:620px;
    height:auto;
    object-fit:contain;
    display:block;
    background:#000;
}
E apague completamente esta regra:

.hero-media video{
    height:520px;
}
Ela não serve para mais nada.

Depois altere a DIV que segura o vídeo
Ela deve ficar assim:

.hero-media{
    display:flex;
    justify-content:center;
    align-items:center;

    background:#000;

    border-radius:28px;

    overflow:hidden;

    min-height:620px;
}
No celular
Troque isto:

.hero-media video{
    height:430px;
}
por

.hero-media{
    min-height:420px;
}

.hero-media video{
    width:100%;
    height:auto;
    object-fit:contain;
}
Eu faria diferente (fica muito mais bonito)
Como seu vídeo é 9:16, eu não deixaria ele ocupando uma coluna inteira.

Faria assim:

┌───────────────────────────────┐
│                               │
│          TÍTULO               │
│        Descrição              │
│                               │
│     [ COMPRAR AGORA ]         │
│                               │
│         █████████             │
│         █ VIDEO █             │
│         █████████             │
│                               │
└───────────────────────────────┘
Ou seja, o vídeo fica centralizado, mostrando o produto inteiro, em vez de esticado até as bordas.

Uma observação
Pela qualidade que a página já está ficando, eu pararia de editar esse CSS "minificado". Ele está todo em uma única linha e cada alteração fica difícil.

Eu dividiria o projeto em:

index.html

css/
    style.css

js/
    app.js

assets/
Assim conseguimos evoluir o site muito mais rápido e com muito menos chance de quebrar alguma coisa.


ixhi aqui nao ta identao dificil em 

Deixa comigo. Você não precisa mexer nesse CSS minificado. Vou ajustar o vídeo no arquivo completo e te entregar o index.html pronto para substituir no GitHub.



Código colado(8).html
Arquivo

Pronto. Ajustei o vídeo para aparecer inteiro, sem cortar.

index_video_sem_corte.html

No GitHub:

Apague ou substitua o index.html atual.

Envie esse arquivo.

Renomeie para index.html, caso o GitHub mantenha o nome index_video_sem_corte.html.

Faça Commit + Sync/Push.

O Cloudflare atualizará automaticamente.



Biblioteca
/
index_video_sem_corte.html




<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="ChumbaFix, organizador e transportador de chicotes para varas de pesca. Personalizado e produzido pela Ideia do Véio.">
<meta property="og:title" content="ChumbaFix | Ideia do Véio">
<meta property="og:description" content="Organize seus chicotes em segundos. Conheça o ChumbaFix.">
<meta property="og:image" content="https://ideiadoveio.com.br/assets/produto-01.jpg">
<meta property="og:type" content="website">
<meta property="og:url" content="https://ideiadoveio.com.br">
<meta name="theme-color" content="#111111">
<title>ChumbaFix | Ideia do Véio</title>
<style>
:root{--bg:#0c0c0c;--surface:#171717;--surface2:#202020;--text:#fff;--muted:#b8b8b8;--accent:#f4a900;--accent2:#ffd66a;--green:#25d366;--border:rgba(255,255,255,.1);--radius:22px;--shadow:0 22px 70px rgba(0,0,0,.35)}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:Inter,Arial,sans-serif;background:radial-gradient(circle at 90% 0,rgba(244,169,0,.14),transparent 32%),var(--bg);color:var(--text);line-height:1.55}img,video{display:block;max-width:100%}a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}.container{width:min(1160px,calc(100% - 32px));margin:auto}
header{position:sticky;top:0;z-index:50;background:rgba(12,12,12,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}.nav{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{display:flex;align-items:center;gap:12px;font-weight:900}.brand img{width:62px;height:62px;border-radius:50%;object-fit:cover}.brand small{display:block;color:var(--muted);font-size:11px;letter-spacing:1.5px;text-transform:uppercase}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:15px 22px;border-radius:999px;font-weight:900;border:0;cursor:pointer;transition:.2s}.btn:hover{transform:translateY(-2px)}.btn-whats{background:var(--green);color:#07130b;box-shadow:0 12px 30px rgba(37,211,102,.2)}.btn-ghost{border:1px solid var(--border);background:rgba(255,255,255,.03)}
.partner-strip{display:none;background:linear-gradient(90deg,#f4a900,#ffd66a);color:#111;padding:10px 16px;font-weight:900;text-align:center}.partner-strip.show{display:block}
.hero{padding:68px 0 48px}.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:42px;align-items:center}.eyebrow{color:var(--accent);font-weight:900;text-transform:uppercase;letter-spacing:1.6px;font-size:13px;margin-bottom:16px}h1{font-size:clamp(44px,7vw,78px);line-height:.98;letter-spacing:-3.6px;margin-bottom:22px}h1 span{color:var(--accent)}.lead{font-size:20px;color:var(--muted);max-width:680px}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.micro{margin-top:14px;color:#909090;font-size:13px}
.hero-media{position:relative;border-radius:30px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow);background:#000}.hero-media video{width:100%;height:620px;object-fit:contain;background:#000}.hero-media .overlay{position:absolute;left:18px;right:18px;bottom:18px;background:rgba(0,0,0,.7);backdrop-filter:blur(10px);padding:18px;border:1px solid rgba(255,255,255,.1);border-radius:18px;display:flex;justify-content:space-between;gap:15px;align-items:center}.overlay strong{font-size:20px}.overlay span{color:#ddd;font-size:13px}.tag{background:var(--accent);color:#111!important;padding:8px 11px;border-radius:999px;font-weight:900;white-space:nowrap}
section{padding:72px 0}.section-title{max-width:760px;margin-bottom:32px}.section-title h2{font-size:clamp(34px,5vw,54px);line-height:1.05;letter-spacing:-2px;margin-bottom:12px}.section-title p{color:var(--muted);font-size:18px}
.benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:25px}.icon{font-size:26px;width:52px;height:52px;display:grid;place-items:center;background:rgba(244,169,0,.12);border-radius:16px;margin-bottom:18px}.card h3{margin-bottom:8px}.card p{color:var(--muted)}
.carousel{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:28px;overflow:hidden;box-shadow:var(--shadow)}.slides{display:flex;transition:transform .45s ease}.slide{min-width:100%;border:0;background:#111;cursor:zoom-in}.slide img{width:100%;height:640px;object-fit:contain;background:#111}.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border:0;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;font-size:24px;cursor:pointer;z-index:2}.prev{left:14px}.next{right:14px}.thumbs{display:flex;gap:10px;overflow:auto;padding:14px;background:#0f0f0f}.thumb{border:2px solid transparent;background:none;border-radius:12px;overflow:hidden;min-width:78px;cursor:pointer}.thumb.active{border-color:var(--accent)}.thumb img{width:78px;height:78px;object-fit:cover}
.personalize{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}.personalize img{border-radius:26px;box-shadow:var(--shadow);border:1px solid var(--border)}.checks{display:grid;gap:13px;margin-top:20px}.checks div::before{content:"✓";color:var(--accent);font-weight:900;margin-right:10px}
.partners{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.partner-card{text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:22px}.partner-badge{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;background:var(--accent);color:#111;font-size:24px;font-weight:900}.partner-card p{color:var(--muted);font-size:14px;margin:8px 0 14px}.copy-link{width:100%;border:1px solid var(--border);background:#111;color:#fff;border-radius:12px;padding:10px;cursor:pointer}
.form-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:28px}.form-info,.form-card{background:var(--surface);border:1px solid var(--border);border-radius:28px;padding:30px}.form-info img{width:140px;border-radius:50%;margin-bottom:22px}.form-info h2{font-size:42px;line-height:1.05;margin-bottom:14px}.form-info p{color:var(--muted)}.fields{display:grid;grid-template-columns:1fr 1fr;gap:15px}.field{display:grid;gap:7px}.wide{grid-column:1/-1}label{font-size:14px;font-weight:800}input,select,textarea{width:100%;padding:14px;border-radius:13px;border:1px solid rgba(255,255,255,.14);background:#101010;color:#fff;outline:none}input:focus,select:focus,textarea:focus{border-color:var(--accent)}textarea{min-height:105px;resize:vertical}.form-card .btn{width:100%;margin-top:18px}
footer{padding:36px 0 90px;border-top:1px solid var(--border);color:#8d8d8d}.foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}.foot-brand{display:flex;align-items:center;gap:10px;color:#ddd;font-weight:900}.foot-brand img{width:54px;border-radius:50%}.float{position:fixed;right:18px;bottom:18px;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#07130b;font-size:28px;box-shadow:0 15px 40px rgba(37,211,102,.35);z-index:60}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;z-index:100;padding:20px}.modal.show{display:flex}.modal img{max-height:92vh;max-width:92vw}.modal button{position:absolute;right:20px;top:20px;width:46px;height:46px;border-radius:50%;border:0;font-size:24px}
@media(max-width:950px){.hero-grid,.personalize,.form-grid{grid-template-columns:1fr}.benefits{grid-template-columns:1fr 1fr}.partners{grid-template-columns:1fr 1fr}.hero-media video{height:520px;object-fit:contain;background:#000}}
@media(max-width:580px){.brand div{display:none}.nav .btn{padding:12px 14px;font-size:13px}.hero{padding-top:44px}h1{letter-spacing:-2px}.actions{flex-direction:column}.actions .btn{width:100%}.hero-media video{height:430px;object-fit:contain;background:#000}.benefits,.partners,.fields{grid-template-columns:1fr}.wide{grid-column:auto}.slide img{height:460px}.form-info h2{font-size:34px}}

    /* Cuidados e restrições — adicionado sem alterar o layout original */
    .care-section {
      background:
        radial-gradient(circle at 90% 10%, rgba(244,169,0,.10), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,.005));
      border-top: 1px solid rgba(244,169,0,.18);
      border-bottom: 1px solid rgba(244,169,0,.18);
    }

    .care-heading {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 18px;
      align-items: start;
      margin-bottom: 30px;
    }

    .care-alert-icon {
      width: 62px;
      height: 62px;
      border-radius: 18px;
      display: grid;
      place-items: center;
      font-size: 30px;
      background: rgba(244,169,0,.14);
      border: 1px solid rgba(244,169,0,.25);
    }

    .care-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }

    .care-card {
      background: var(--surface);
      border: 1px solid rgba(244,169,0,.20);
      border-radius: 22px;
      padding: 25px;
    }

    .care-card h3 {
      font-size: 20px;
      margin-bottom: 9px;
    }

    .care-card p {
      color: var(--muted);
    }

    .care-card strong {
      color: var(--accent);
    }

    .care-warning {
      margin-top: 18px;
      padding: 18px 20px;
      border-radius: 17px;
      background: rgba(210,65,65,.09);
      border: 1px solid rgba(230,90,90,.28);
      color: #f0d6d6;
    }

    @media (max-width: 860px) {
      .care-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 520px) {
      .care-heading {
        grid-template-columns: 1fr;
      }
    }

  
/* Selo de patente requerida */
.patent-wrap{margin:24px 0 8px;display:flex;align-items:center;gap:16px;max-width:620px;padding:16px 18px;border-radius:18px;background:linear-gradient(145deg,rgba(33,33,33,.97),rgba(15,15,15,.97));border:1px solid rgba(244,169,0,.42);box-shadow:0 15px 35px rgba(0,0,0,.28),0 0 28px rgba(244,169,0,.08)}
.patent-seal{width:58px;height:58px;min-width:58px;border-radius:17px;display:grid;place-items:center;color:#111;font-size:27px;background:linear-gradient(145deg,#ffd66a,#f4a900);box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.patent-content{display:grid;gap:2px}
.patent-title{color:var(--accent2);font-weight:950;letter-spacing:.7px;font-size:18px}
.patent-copy{color:#dadada;font-size:13px}
.patent-number{color:#fff;font-weight:850;letter-spacing:.8px;font-size:15px}
.patent-note{color:#9b9b9b;font-size:11px;margin-top:2px}
@media(max-width:580px){.patent-wrap{align-items:flex-start;padding:14px}.patent-seal{width:50px;height:50px;min-width:50px;font-size:23px}.patent-title{font-size:16px}.patent-number{font-size:13px}}

</style>
</head>
<body>
<div id="partnerStrip" class="partner-strip"></div>
<header>
  <div class="container nav">
    <a class="brand" href="#inicio"><img src="assets/logo.png" alt="Ideia do Véio"><div>IDEIA DO VÉIO<small>Produtos criativos</small></div></a>
    <a class="btn btn-whats" href="#comprar">💬 Comprar agora</a>
  </div>
</header>

<main id="inicio">
<section class="hero">
  <div class="container hero-grid">
    <div>
      <div class="eyebrow">🎣 Produto exclusivo para pescadores</div>
      <h1>Organize seus chicotes em <span>segundos.</span></h1>
      <div class="patent-wrap" role="note" aria-label="Pedido de patente requerido">
        <div class="patent-seal" aria-hidden="true">🛡️</div>
        <div class="patent-content">
          <span class="patent-title">PATENTE REQUERIDA</span>
          <span class="patent-copy">Pedido de Patente — Modelo de Utilidade depositado no INPI</span>
          <span class="patent-number">BR 20 2026 016452-1</span>
          <span class="patent-note">Pedido em análise. A patente ainda não foi concedida.</span>
        </div>
      </div>
      <p class="lead">O ChumbaFix mantém chicotes, anzóis e chumbadas organizados e presos à vara, ajudando também a proteger o equipamento durante o transporte e armazenamento.</p>
      <div class="actions">
        <a class="btn btn-whats" href="#comprar">💬 Quero meu ChumbaFix</a>
        <a class="btn btn-ghost" href="#galeria">Ver fotos</a>
      </div>
      <div class="micro">Produção própria • Personalização disponível • Envio para todo o Brasil</div>
    </div>
    <div class="hero-media">
      <video src="assets/demonstracao.mp4" autoplay muted loop playsinline poster="assets/produto-01.jpg"></video>
      <div class="overlay"><div><strong>ChumbaFix</strong><br><span>Organizador e transportador de chicotes</span></div><span class="tag">Ideia do Véio</span></div>
    </div>
  </div>
</section>

<section>
<div class="container">
  <div class="section-title"><h2>Feito para resolver um problema real.</h2><p>Mais organização na preparação, no transporte e durante a pescaria.</p></div>
  <div class="benefits">
    <article class="card"><div class="icon">🧵</div><h3>Evita embaraços</h3><p>Mantém os chicotes separados e prontos para uso.</p></article>
    <article class="card"><div class="icon">🎣</div><h3>Preso à vara</h3><p>O conjunto acompanha a vara durante o transporte.</p></article>
    <article class="card"><div class="icon">🛡️</div><h3>Proteção completa</h3><p>Protege a vara, os anzóis, a linha e as chumbadas durante o transporte e armazenamento.</p></article>
    <article class="card"><div class="icon">🖨️</div><h3>Personalizável</h3><p>Produzido em diferentes cores e com aplicação de marca.</p></article>
  </div>
</div>
</section>

<section id="galeria">
<div class="container">
  <div class="section-title"><h2>Veja o ChumbaFix em detalhes.</h2><p>Modelos, cores, personalizações e diferentes ângulos do produto.</p></div>
  <div class="carousel">
    <button class="carousel-btn prev" aria-label="Anterior">‹</button>
    <div class="slides"><button class="slide" aria-label="Imagem 1"><img src="assets/produto-01.jpg" alt="ChumbaFix - foto 1" loading="lazy"></button>
<button class="slide" aria-label="Imagem 2"><img src="assets/produto-02.jpg" alt="ChumbaFix - foto 2" loading="lazy"></button>
<button class="slide" aria-label="Imagem 3"><img src="assets/produto-03.jpg" alt="ChumbaFix - foto 3" loading="lazy"></button>
<button class="slide" aria-label="Imagem 4"><img src="assets/produto-04.jpg" alt="ChumbaFix - foto 4" loading="lazy"></button>
<button class="slide" aria-label="Imagem 5"><img src="assets/produto-05.jpg" alt="ChumbaFix - foto 5" loading="lazy"></button>
<button class="slide" aria-label="Imagem 6"><img src="assets/produto-06.jpg" alt="ChumbaFix - foto 6" loading="lazy"></button>
<button class="slide" aria-label="Imagem 7"><img src="assets/produto-07.jpg" alt="ChumbaFix - foto 7" loading="lazy"></button>
<button class="slide" aria-label="Imagem 8"><img src="assets/produto-08.jpg" alt="ChumbaFix - foto 8" loading="lazy"></button>
<button class="slide" aria-label="Imagem 9"><img src="assets/produto-09.jpg" alt="ChumbaFix - foto 9" loading="lazy"></button>
<button class="slide" aria-label="Imagem 10"><img src="assets/produto-10.jpg" alt="ChumbaFix - foto 10" loading="lazy"></button></div>
    <button class="carousel-btn next" aria-label="Próxima">›</button>
    <div class="thumbs"><button class="thumb" data-index="0"><img src="assets/produto-01.jpg" alt="Miniatura 1"></button>
<button class="thumb" data-index="1"><img src="assets/produto-02.jpg" alt="Miniatura 2"></button>
<button class="thumb" data-index="2"><img src="assets/produto-03.jpg" alt="Miniatura 3"></button>
<button class="thumb" data-index="3"><img src="assets/produto-04.jpg" alt="Miniatura 4"></button>
<button class="thumb" data-index="4"><img src="assets/produto-05.jpg" alt="Miniatura 5"></button>
<button class="thumb" data-index="5"><img src="assets/produto-06.jpg" alt="Miniatura 6"></button>
<button class="thumb" data-index="6"><img src="assets/produto-07.jpg" alt="Miniatura 7"></button>
<button class="thumb" data-index="7"><img src="assets/produto-08.jpg" alt="Miniatura 8"></button>
<button class="thumb" data-index="8"><img src="assets/produto-09.jpg" alt="Miniatura 9"></button>
<button class="thumb" data-index="9"><img src="assets/produto-10.jpg" alt="Miniatura 10"></button></div>
  </div>
</div>
</section>

<section>
<div class="container personalize">
  <img src="assets/produto-04.jpg" alt="ChumbaFix personalizado Náutica Diniz" loading="lazy">
  <div>
    <div class="eyebrow">Personalização para equipes e empresas</div>
    <div class="section-title"><h2>Sua marca também pode estar no produto.</h2><p>Ideal para guias de pesca, lojas, equipes, clubes e parceiros que querem um produto exclusivo.</p></div>
    <div class="checks"><div>Logo personalizada nas extremidades</div><div>Escolha de cores</div><div>Produção para varejo ou atacado</div><div>Condições para parceiros e revendedores</div></div>
  </div>
</div>
</section>

<section>
<div class="container">
  <div class="section-title"><h2>Parceiros Ideia do Véio.</h2><p>Cada parceiro possui um link e cupom exclusivo para rastrear suas indicações.</p></div>
  <div class="partners"><article class="partner-card">
      <div class="partner-badge">N</div>
      <h3>Náutica Diniz</h3>
      <p>Cupom exclusivo: <strong>DINIZ10</strong></p>
      <button class="copy-link" data-ref="nauticadiniz" data-name="Náutica Diniz" data-coupon="DINIZ10">Copiar link do parceiro</button>
    </article>
<article class="partner-card">
      <div class="partner-badge">E</div>
      <h3>Edson Tominaga</h3>
      <p>Cupom exclusivo: <strong>TOMINAGA10</strong></p>
      <button class="copy-link" data-ref="edsontominaga" data-name="Edson Tominaga" data-coupon="TOMINAGA10">Copiar link do parceiro</button>
    </article>
<article class="partner-card">
      <div class="partner-badge">B</div>
      <h3>Batman Guia</h3>
      <p>Cupom exclusivo: <strong>BATMAN10</strong></p>
      <button class="copy-link" data-ref="batmanguia" data-name="Batman Guia" data-coupon="BATMAN10">Copiar link do parceiro</button>
    </article>
<article class="partner-card">
      <div class="partner-badge">L</div>
      <h3>Lucas Pesca</h3>
      <p>Cupom exclusivo: <strong>LUCAS10</strong></p>
      <button class="copy-link" data-ref="lucaspesca" data-name="Lucas Pesca" data-coupon="LUCAS10">Copiar link do parceiro</button>
    </article>
<article class="partner-card">
      <div class="partner-badge">E</div>
      <h3>Everton BM Placas</h3>
      <p>Cupom exclusivo: <strong>BMPLACAS10</strong></p>
      <button class="copy-link" data-ref="bmplacas" data-name="Everton BM Placas" data-coupon="BMPLACAS10">Copiar link do parceiro</button>
    </article></div>
</div>
</section>


    <section class="section care-section" id="cuidados">
      <div class="container">
        <div class="care-heading">
          <div class="care-alert-icon">⚠️</div>
          <div class="section-title" style="margin-bottom:0">
            <h2>Cuidados e restrições de uso.</h2>
            <p>
              Use o ChumbaFix corretamente para preservar o formato da peça e aumentar sua durabilidade.
            </p>
          </div>
        </div>

        <div class="care-grid">
          <article class="care-card">
            <h3>🧵 Não tensione demais o chicote</h3>
            <p>
              Utilize somente a tensão necessária para manter a linha organizada.
              <strong>Não estique ou force excessivamente o chicote no suporte</strong>,
              pois isso pode deformar a peça, sobrecarregar os encaixes ou reduzir sua vida útil.
            </p>
          </article>

          <article class="care-card">
            <h3>☀️ Evite exposição prolongada ao sol</h3>
            <p>
              Não deixe o produto diretamente exposto ao sol por longos períodos,
              principalmente sobre superfícies que acumulam calor.
            </p>
          </article>

          <article class="care-card">
            <h3>🌡️ Evite ambientes com temperatura elevada</h3>
            <p>
              Por ser produzido em material plástico, o ChumbaFix pode amolecer e deformar
              quando submetido a calor excessivo. Evite painel de automóvel, porta-malas fechado,
              compartimentos próximos ao motor e embarcações fechadas sob sol intenso.
            </p>
          </article>

          <article class="care-card">
            <h3>🧼 Limpeza e armazenamento</h3>
            <p>
              Após a pescaria, remova areia e sujeira, lave com água limpa e seque antes de guardar.
              Armazene em local seco, ventilado e protegido do calor.
            </p>
          </article>
        </div>

        <div class="care-warning">
          <strong>Atenção:</strong> deformações provocadas por tensão excessiva, exposição prolongada
          ao sol, temperaturas elevadas, impactos ou utilização fora da finalidade do produto
          não caracterizam defeito de fabricação.
        </div>
      </div>
    </section>


<section id="comprar">
<div class="container form-grid">
  <div class="form-info"><img src="assets/logo.png" alt="Ideia do Véio"><h2>Peça seu orçamento.</h2><p>Preencha os dados. A página monta a mensagem e abre diretamente no WhatsApp.</p><div class="checks"><div>Atendimento direto</div><div>Preço conforme a quantidade</div><div>Varejo, atacado e personalização</div><div>Origem do parceiro registrada</div></div></div>
  <form id="leadForm" class="form-card">
    <div class="fields">
      <div class="field"><label>Nome *</label><input id="nome" required></div>
      <div class="field"><label>Telefone</label><input id="telefone" type="tel"></div>
      <div class="field"><label>Cidade / Estado *</label><input id="cidade" required></div>
      <div class="field"><label>Quantidade *</label><input id="quantidade" type="number" min="1" value="1" required></div>
      <div class="field"><label>Cor</label><select id="cor"><option>Preto</option><option>Branco</option><option>Laranja</option><option>Verde</option><option>Roxo</option><option>Amarelo</option><option>Outra</option></select></div>
      <div class="field"><label>Tipo</label><select id="tipo"><option>Uso próprio</option><option>Revenda</option><option>Personalizado com logo</option></select></div>
      <div class="field wide"><label>Cupom</label><input id="cupom" placeholder="Será preenchido automaticamente pelo link do parceiro"></div>
      <div class="field wide"><label>Observações</label><textarea id="obs"></textarea></div>
    </div>
    <button class="btn btn-whats" type="submit">💬 Enviar pelo WhatsApp</button>
  </form>
</div>
</section>
</main>

<footer><div class="container foot"><div class="foot-brand"><img src="assets/logo.png" alt="">Ideia do Véio</div><span>© <span id="year"></span> Ideia do Véio</span></div></footer>
<a class="float" href="#comprar" aria-label="WhatsApp">💬</a>

<div id="modal" class="modal"><button id="closeModal">×</button><img id="modalImg" alt=""></div>

<script>
const partners = {"nauticadiniz": {"name": "Náutica Diniz", "coupon": "DINIZ10"}, "edsontominaga": {"name": "Edson Tominaga", "coupon": "TOMINAGA10"}, "batmanguia": {"name": "Batman Guia", "coupon": "BATMAN10"}, "lucaspesca": {"name": "Lucas Pesca", "coupon": "LUCAS10"}, "bmplacas": {"name": "Everton BM Placas", "coupon": "BMPLACAS10"}};
const phone = "5544988223411";
const params = new URLSearchParams(location.search);
let ref = params.get("ref") || localStorage.getItem("ideia_ref") || "";
if (ref && partners[ref]) {
  localStorage.setItem("ideia_ref", ref);
  localStorage.setItem("ideia_ref_date", new Date().toISOString());
  document.getElementById("partnerStrip").textContent = "Você chegou pela indicação de " + partners[ref].name + " • Cupom " + partners[ref].coupon;
  document.getElementById("partnerStrip").classList.add("show");
  document.getElementById("cupom").value = partners[ref].coupon;
}
const slides = document.querySelector(".slides");
const thumbs = [...document.querySelectorAll(".thumb")];
let index = 0;
function go(i) {
  index = (i + thumbs.length) % thumbs.length;
  slides.style.transform = `translateX(-${index*100}%)`;
  thumbs.forEach((t,n)=>t.classList.toggle("active",n===index));
}
document.querySelector(".next").onclick=()=>go(index+1);
document.querySelector(".prev").onclick=()=>go(index-1);
thumbs.forEach((t,i)=>t.onclick=()=>go(i)); go(0);
setInterval(()=>go(index+1),6000);

document.querySelectorAll(".slide img").forEach(img=>img.onclick=()=>{document.getElementById("modalImg").src=img.src;document.getElementById("modal").classList.add("show")});
document.getElementById("closeModal").onclick=()=>document.getElementById("modal").classList.remove("show");
document.getElementById("modal").onclick=e=>{if(e.target.id==="modal")e.currentTarget.classList.remove("show")};

document.querySelectorAll(".copy-link").forEach(btn=>btn.onclick=async()=>{
  const url = `${location.origin}/?ref=${btn.dataset.ref}`;
  await navigator.clipboard.writeText(url);
  btn.textContent="Link copiado!";
  setTimeout(()=>btn.textContent="Copiar link do parceiro",1600);
});

document.getElementById("leadForm").addEventListener("submit",e=>{
  e.preventDefault();
  const partner = ref && partners[ref] ? partners[ref].name : "Direto / não identificado";
  const coupon = document.getElementById("cupom").value.trim() || "Nenhum";
  const msg = `Olá! Vim pelo site da Ideia do Véio e quero um orçamento do ChumbaFix.

*Nome:* ${document.getElementById("nome").value}
*Telefone:* ${document.getElementById("telefone").value || "Não informado"}
*Cidade/Estado:* ${document.getElementById("cidade").value}
*Quantidade:* ${document.getElementById("quantidade").value}
*Cor:* ${document.getElementById("cor").value}
*Tipo:* ${document.getElementById("tipo").value}
*Cupom:* ${coupon}
*Parceiro/Origem:* ${partner}
*Observações:* ${document.getElementById("obs").value || "Nenhuma"}`;
  window.open(`https://wa.me/${phone}?text=${encodeURIComponent(msg)}`,"_blank");
});
document.getElementById("year").textContent=new Date().getFullYear();
</script>
</body>
</html>