<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfólio Cinematográfico</title>
<!-- Importando Tailwind CSS para responsividade e layout moderno -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Fontes Google (Playfair Display para títulos elegantes, Inter para corpo) -->
<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@300;400;600&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
<!-- Ícones (FontAwesome) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* --- CONFIGURAÇÃO DE CORES (EDITÁVEL) --- */
:root {
--bg-color: #121212; /* Fundo Principal (Dark) */
--text-color: #e0e0e0; /* Texto Claro */
--accent-color: #d64933; /* Cor de destaque (Laranja Queimado - Estilo Gracey) */
--secondary-color: #2c3e50; /* Cor secundária */
--card-bg: #1e1e1e; /* Fundo dos Cards */
}
/* Aplicação das fontes */
body {
font-family: 'Inter', sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
overflow-x: hidden; /* Evita scroll horizontal indesejado na página global */
}
h1, h2, h3, h4, .font-serif {
font-family: 'Playfair Display', serif;
}
/* --- ESTILOS DO SLIDER HORIZONTAL --- */
.horizontal-scroll-container {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
height: 100vh; /* Ocupa a tela toda */
align-items: center;
padding-left: 5vw; /* Espaço inicial */
padding-right: 5vw;
scrollbar-width: none; /* Firefox */
}
.horizontal-scroll-container::-webkit-scrollbar {
display: none; /* Chrome/Safari */
}
/* Dimensões Fixas Solicitadas */
.slide-item {
flex: 0 0 auto;
width: 450px;
height: 696px;
margin-right: 25px; /* Espaçamento solicitado */
position: relative;
transition: transform 0.4s ease, filter 0.4s ease;
overflow: hidden;
cursor: pointer;
}
/* Efeito Hover nos Slides */
.slide-item:hover {
transform: scale(1.02);
z-index: 10;
}
.slide-item img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(80%); /* Estilo artístico */
transition: filter 0.5s ease;
}
.slide-item:hover img {
filter: grayscale(0%);
}
/* --- MENU HAMBURGUER INOVADOR --- */
.menu-btn {
z-index: 60;
cursor: pointer;
transition: transform 0.3s ease;
}
.menu-btn:hover {
transform: rotate(90deg);
}
.fullscreen-menu {
position: fixed;
top: 0;
right: -100%;
width: 100%;
height: 100vh;
background-color: var(--accent-color);
z-index: 55;
transition: right 0.6s cubic-bezier(0.77, 0, 0.175, 1);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.fullscreen-menu.active {
right: 0;
}
.menu-link {
font-family: 'Playfair Display', serif;
font-size: 3rem;
color: #fff;
margin: 1rem 0;
text-decoration: none;
position: relative;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.4s ease, transform 0.4s ease;
}
.fullscreen-menu.active .menu-link {
opacity: 1;
transform: translateY(0);
transition-delay: 0.3s;
}
.menu-link::after {
content: '';
display: block;
width: 0;
height: 2px;
background: #fff;
transition: width .3s;
}
.menu-link:hover::after {
width: 100%;
}
/* --- UTILITÁRIOS --- */
.section-padding {
padding: 4rem 2rem;
max-width: 1400px;
margin: 0 auto;
}
/* Ajuste para mobile no slider (quebra para vertical se a tela for muito pequena) */
@media (max-width: 768px) {
.horizontal-scroll-container {
flex-direction: column;
height: auto;
padding-top: 100px;
overflow-x: hidden;
}
.slide-item {
width: 90%;
height: 500px;
margin-right: 0;
margin-bottom: 30px;
}
}
.video-wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 Aspect Ratio (1920x1080) */
height: 0;
overflow: hidden;
background: #000;
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Estilos dos campos de formulário */
.form-input {
background: transparent;
border-bottom: 2px solid var(--text-color);
color: var(--text-color);
padding: 10px 0;
width: 100%;
outline: none;
transition: border-color 0.3s;
}
.form-input:focus {
border-color: var(--accent-color);
}
</style>
</head>
<body>
<!-- === HEADER === -->
<header class="fixed top-0 left-0 w-full flex justify-between items-center px-8 py-6 z-50 bg-gradient-to-b from-black/80 to-transparent pointer-events-none">
<!-- Logo (Lado Esquerdo, 73x35) -->
<div class="pointer-events-auto">
<a href="#" onclick="scrollToSection('home')">
<!-- Placeholder da Logo - Substitua o src pela sua imagem -->
<img src="https://placehold.co/73x35/d64933/FFF?text=LOGO" alt="Logo do Site" style="width: 73px; height: 35px;">
</a>
</div>
<!-- Menu Hambúrguer (Lado Direito) -->
<div class="menu-btn pointer-events-auto" onclick="toggleMenu()">
<svg width="40" height="40" viewBox="0 0 100 100" fill="none" stroke="var(--text-color)" stroke-width="5">
<line x1="10" y1="30" x2="90" y2="30" />
<line x1="30" y1="50" x2="90" y2="50" />
<line x1="50" y1="70" x2="90" y2="70" />
</svg>
</div>
</header>
<!-- === MENU OVERLAY (Sobre Mim / Contato) === -->
<div id="fullscreen-menu" class="fullscreen-menu">
<a href="#sobre" class="menu-link" onclick="toggleMenu()">Sobre Mim</a>
<a href="#contato" class="menu-link" onclick="toggleMenu()">Contato</a>
<a href="#" class="menu-link text-xl mt-10" onclick="toggleMenu()">Fechar</a>
</div>
<!-- === HOME: HORIZONTAL SLIDER === -->
<section id="home" class="relative">
<div class="horizontal-scroll-container" id="sliderContainer">
<!-- Categoria 1: Direção -->
<div class="slide-item group" onclick="scrollToSection('direcao')">
<img src="https://images.unsplash.com/photo-1485846234645-a62644f84728?q=80&w=1000&auto=format&fit=crop" alt="Direção">
<div class="absolute bottom-10 left-6 z-20">
<h2 class="text-4xl font-serif font-bold text-white group-hover:text-[var(--accent-color)] transition-colors">Direção</h2>
<p class="text-sm uppercase tracking-widest mt-2 opacity-80">Cinema & Arte</p>
</div>
<div class="absolute inset-0 bg-black/30 group-hover:bg-black/10 transition-all"></div>
</div>
<!-- Categoria 2: Roteiro -->
<div class="slide-item group" onclick="scrollToSection('roteiro')">
<img src="https://images.unsplash.com/photo-1455390582262-044cdead277a?q=80&w=1000&auto=format&fit=crop" alt="Roteiro">
<div class="absolute bottom-10 left-6 z-20">
<h2 class="text-4xl font-serif font-bold text-white group-hover:text-[var(--accent-color)] transition-colors">Roteiro</h2>
<p class="text-sm uppercase tracking-widest mt-2 opacity-80">Filmes & Jogos</p>
</div>
<div class="absolute inset-0 bg-black/30 group-hover:bg-black/10 transition-all"></div>
</div>
<!-- Categoria 3: Produção Cultural -->
<div class="slide-item group" onclick="scrollToSection('producao')">
<img src="https://images.unsplash.com/photo-1514525253440-b39345208668?q=80&w=1000&auto=format&fit=crop" alt="Produção Cultural">
<div class="absolute bottom-10 left-6 z-20">
<h2 class="text-4xl font-serif font-bold text-white group-hover:text-[var(--accent-color)] transition-colors">Produção Cultural</h2>
<p class="text-sm uppercase tracking-widest mt-2 opacity-80">Gestão & Eventos</p>
</div>
<div class="absolute inset-0 bg-black/30 group-hover:bg-black/10 transition-all"></div>
</div>
<!-- Categoria 4: Edição Montagem -->
<div class="slide-item group" onclick="scrollToSection('edicao')">
<img src="https://images.unsplash.com/photo-1574717024653-61fd2cf4d44c?q=80&w=1000&auto=format&fit=crop" alt="Edição">
<div class="absolute bottom-10 left-6 z-20">
<h2 class="text-4xl font-serif font-bold text-white group-hover:text-[var(--accent-color)] transition-colors">Edição Montagem</h2>
<p class="text-sm uppercase tracking-widest mt-2 opacity-80">Pós-produção</p>
</div>
<div class="absolute inset-0 bg-black/30 group-hover:bg-black/10 transition-all"></div>
</div>
<!-- Categoria 5: Legender -->
<div class="slide-item group" onclick="scrollToSection('legender')">
<img src="https://images.unsplash.com/photo-1515634928627-2a4e0dae3ddf?q=80&w=1000&auto=format&fit=crop" alt="Legender">
<div class="absolute bottom-10 left-6 z-20">
<h2 class="text-4xl font-serif font-bold text-white group-hover:text-[var(--accent-color)] transition-colors">Legender</h2>
<p class="text-sm uppercase tracking-widest mt-2 opacity-80">Tradução & Acessibilidade</p>
</div>
<div class="absolute inset-0 bg-black/30 group-hover:bg-black/10 transition-all"></div>
</div>
</div>
<!-- Instrução de navegação -->
<div class="absolute bottom-8 right-8 text-white opacity-50 animate-bounce hidden md:block">
<i class="fas fa-arrow-right"></i> Scroll ou Clique
</div>
</section>
<!--
NOTA: No WordPress real, as seções abaixo seriam páginas individuais.
Aqui elas estão na mesma página para demonstração do design.
Ao clicar nos slides acima, o script rola até a seção correspondente.
-->
<!-- === PÁGINA: DIREÇÃO === -->
<section id="direcao" class="bg-[#1a1a1a] min-h-screen py-20 border-t border-gray-800">
<div class="section-padding">
<h1 class="text-6xl font-serif mb-12 text-[var(--accent-color)]">Direção</h1>
<!-- Projeto Exemplo -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-20">
<!-- Espaço para Trailer (1920x1080 aspect ratio) -->
<div class="video-wrapper shadow-2xl">
<!-- EDITÁVEL: Link do YouTube -->
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ?si=abc" title="Trailer do Filme" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<!-- Sinopse e Prêmios -->
<div class="flex flex-col justify-center">
<h3 class="text-3xl font-bold mb-4">O Horizonte Perdido</h3>
<p class="text-lg text-gray-400 mb-8 leading-relaxed">
<!-- EDITÁVEL: Sinopse -->
Uma exploração visual e narrativa sobre a solidão moderna. O filme acompanha a jornada de um protagonista sem nome através de paisagens urbanas desoladas, buscando conexões em um mundo cada vez mais digital.
</p>
<div class="border-l-4 border-[var(--accent-color)] pl-6">
<h4 class="text-xl font-serif mb-4">Prêmios & Seleções</h4>
<ul class="space-y-2 text-sm text-gray-300">
<li><i class="fas fa-trophy text-yellow-500 mr-2"></i> Melhor Direção - Festival de Gramado</li>
<li><i class="fas fa-film text-gray-500 mr-2"></i> Seleção Oficial - Sundance</li>
<li><i class="fas fa-award text-yellow-500 mr-2"></i> Melhor Fotografia - Mostra SP</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- === PÁGINA: ROTEIRO === -->
<section id="roteiro" class="bg-[#151515] min-h-screen py-20">
<div class="section-padding">
<h1 class="text-6xl font-serif mb-12 text-[var(--accent-color)]">Roteiro</h1>
<!-- Subseção: Filmes -->
<div class="mb-20">
<h3 class="text-3xl border-b border-gray-700 pb-4 mb-8">Filmes</h3>
<!-- Grid de 6 Imagens -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Item 1 -->
<div class="group cursor-pointer">
<div class="h-64 overflow-hidden bg-gray-800">
<img src="https://placehold.co/600x400/333/FFF?text=Projeto+Filme+1" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
</div>
<div class="mt-4">
<h4 class="text-xl font-bold">Título do Roteiro</h4>
<p class="text-sm text-gray-400 mt-2">Drama, 120 páginas. Uma história sobre reencontros familiares.</p>
</div>
</div>
<!-- Adicione mais 5 itens aqui conforme necessário -->
<div class="group cursor-pointer">
<div class="h-64 overflow-hidden bg-gray-800">
<img src="https://placehold.co/600x400/444/FFF?text=Projeto+Filme+2" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
</div>
<div class="mt-4">
<h4 class="text-xl font-bold">Título do Curta</h4>
<p class="text-sm text-gray-400 mt-2">Terror, 15 páginas. Suspense psicológico em ambiente fechado.</p>
</div>
</div>
</div>
</div>
<!-- Subseção: Jogos -->
<div>
<h3 class="text-3xl border-b border-gray-700 pb-4 mb-8">Jogos (Game Writing)</h3>
<!-- Grid de 6 Imagens -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="group cursor-pointer">
<div class="h-64 overflow-hidden bg-gray-800">
<img src="https://placehold.co/600x400/222/d64933?text=RPG+Game" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
</div>
<div class="mt-4">
<h4 class="text-xl font-bold">Cyber Quest</h4>
<p class="text-sm text-gray-400 mt-2">RPG narrativo. Design de missões e diálogos ramificados.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- === PÁGINA: PRODUÇÃO CULTURAL === -->
<section id="producao" class="bg-[#1a1a1a] min-h-screen py-20">
<div class="section-padding">
<h1 class="text-6xl font-serif mb-12 text-[var(--accent-color)]">Produção Cultural</h1>
<!-- Projeto Cultural -->
<div class="bg-[#252525] p-8 rounded-lg mb-12">
<h3 class="text-3xl font-bold mb-4">Festival de Artes Urbanas</h3>
<p class="text-gray-300 mb-8 max-w-2xl">
Coordenação geral e curadoria de um festival de 3 dias envolvendo 50 artistas. Gestão de orçamento, logística e comunicação.
</p>
<!-- Espaço para 6 fotos do projeto -->
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
<img src="https://placehold.co/300x300/333/FFF?text=Foto+1" class="w-full h-32 object-cover rounded hover:opacity-75 transition">
<img src="https://placehold.co/300x300/333/FFF?text=Foto+2" class="w-full h-32 object-cover rounded hover:opacity-75 transition">
<img src="https://placehold.co/300x300/333/FFF?text=Foto+3" class="w-full h-32 object-cover rounded hover:opacity-75 transition">
<img src="https://placehold.co/300x300/333/FFF?text=Foto+4" class="w-full h-32 object-cover rounded hover:opacity-75 transition">
<img src="https://placehold.co/300x300/333/FFF?text=Foto+5" class="w-full h-32 object-cover rounded hover:opacity-75 transition">
<img src="https://placehold.co/300x300/333/FFF?text=Foto+6" class="w-full h-32 object-cover rounded hover:opacity-75 transition">
</div>
</div>
</div>
</section>
<!-- === PÁGINA: EDIÇÃO MONTAGEM === -->
<section id="edicao" class="bg-[#121212] min-h-screen py-20">
<div class="section-padding">
<h1 class="text-6xl font-serif mb-12 text-[var(--accent-color)]">Edição & Montagem</h1>
<div class="space-y-20">
<!-- Projeto de Edição 1 -->
<div class="flex flex-col xl:flex-row gap-8 items-start">
<div class="w-full xl:w-2/3 video-wrapper">
<!-- EDITÁVEL: Link do Vimeo/YouTube -->
<iframe src="https://player.vimeo.com/video/76979871" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="w-full xl:w-1/3">
<h3 class="text-2xl font-bold mb-4">Showreel 2024</h3>
<p class="text-gray-400">
Compilado de trabalhos realizados em publicidade, videoclipes e ficção. Foco em ritmo dinâmico e color grading expressivo.
<br><br>
Softwares: Premiere Pro, DaVinci Resolve, After Effects.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- === PÁGINA: LEGENDER === -->
<section id="legender" class="bg-[#1a1a1a] min-h-screen py-20">
<div class="section-padding">
<h1 class="text-6xl font-serif mb-12 text-[var(--accent-color)]">Legender</h1>
<div class="grid grid-cols-1 md:grid-cols-2 gap-10">
<!-- Filme Legendado 1 -->
<div class="flex bg-[#252525] p-6 rounded-lg shadow-lg hover:shadow-xl transition duration-300">
<div class="w-1/3 min-w-[100px]">
<!-- Poster -->
<img src="https://placehold.co/300x450/111/FFF?text=Poster" class="w-full rounded shadow-md">
</div>
<div class="w-2/3 pl-6 flex flex-col justify-between">
<div>
<h3 class="text-2xl font-bold mb-2">Título Original (2023)</h3>
<p class="text-sm text-[var(--accent-color)] mb-3">Tradução: Inglês -> Português</p>
<p class="text-gray-400 text-sm line-clamp-4">
Sinopse: Após um evento catastrófico, um grupo de cientistas tenta desvendar os mistérios do tempo. A legendagem focou em manter a terminologia técnica precisa.
</p>
</div>
<a href="https://imdb.com" target="_blank" class="mt-4 inline-block text-yellow-500 font-bold hover:text-white transition">
<i class="fab fa-imdb text-2xl align-middle mr-2"></i> Ver no IMDb
</a>
</div>
</div>
<!-- Filme Legendado 2 -->
<div class="flex bg-[#252525] p-6 rounded-lg shadow-lg hover:shadow-xl transition duration-300">
<div class="w-1/3 min-w-[100px]">
<img src="https://placehold.co/300x450/111/FFF?text=Poster+2" class="w-full rounded shadow-md">
</div>
<div class="w-2/3 pl-6 flex flex-col justify-between">
<div>
<h3 class="text-2xl font-bold mb-2">Le Fabuleux (2022)</h3>
<p class="text-sm text-[var(--accent-color)] mb-3">Tradução: Francês -> Português</p>
<p class="text-gray-400 text-sm line-clamp-4">
Sinopse: Uma comédia romântica ambientada em Paris. O desafio foi adaptar as gírias locais e o humor cultural para o público brasileiro.
</p>
</div>
<a href="https://imdb.com" target="_blank" class="mt-4 inline-block text-yellow-500 font-bold hover:text-white transition">
<i class="fab fa-imdb text-2xl align-middle mr-2"></i> Ver no IMDb
</a>
</div>
</div>
</div>
</div>
</section>
<!-- === SOBRE MIM === -->
<section id="sobre" class="bg-[#151515] min-h-screen py-20">
<div class="section-padding flex flex-col lg:flex-row gap-16 items-center">
<!-- Foto Alta Resolução (2000x3000 aspect ratio wrapper) -->
<div class="w-full lg:w-1/2">
<div class="relative w-full pb-[150%] overflow-hidden rounded-lg shadow-2xl grayscale hover:grayscale-0 transition duration-700">
<!-- EDITÁVEL: Sua foto aqui -->
<img src="https://placehold.co/2000x3000/333/FFF?text=Sua+Foto+2000x3000" class="absolute top-0 left-0 w-full h-full object-cover">
</div>
</div>
<!-- Texto (3000 caracteres) -->
<div class="w-full lg:w-1/2">
<h2 class="text-5xl font-serif mb-8 text-[var(--accent-color)]">Sobre Mim</h2>
<div class="text-gray-300 leading-8 text-lg space-y-6 text-justify">
<!-- EDITÁVEL: Texto de apresentação -->
<p>
Olá, sou um profissional apaixonado por contar histórias, seja através da direção, do roteiro ou da montagem. Com mais de 10 anos de experiência no mercado audiovisual, navego entre o cinema de arte e a produção comercial, sempre buscando imprimir uma identidade visual única e uma narrativa envolvente.
</p>
<p>
Minha jornada começou na universidade, onde descobri o poder da montagem para reescrever filmes. Desde então, dirigi curtas premiados e escrevi para diversas mídias, incluindo jogos interativos. Acredito que a arte deve provocar, questionar e, acima de tudo, conectar pessoas.
</p>
<p>
Aqui neste espaço você encontrará fragmentos do meu trabalho. Sinta-se à vontade para explorar cada categoria e entrar em contato para colaborações futuras.
</p>
<!-- Adicione mais parágrafos até completar os 3000 caracteres desejados -->
</div>
</div>
</div>
</section>
<!-- === CONTATO === -->
<section id="contato" class="bg-[#121212] py-20 border-t border-gray-800">
<div class="section-padding max-w-4xl mx-auto text-center">
<h2 class="text-5xl font-serif mb-12">Vamos Criar Juntos?</h2>
<!-- Formulário -->
<form class="text-left space-y-8 mb-16">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<label class="block text-sm text-gray-500 mb-2">NOME</label>
<input type="text" class="form-input" placeholder="Seu nome">
</div>
<div>
<label class="block text-sm text-gray-500 mb-2">EMAIL</label>
<input type="email" class="form-input" placeholder="seu@email.com">
</div>
</div>
<div>
<label class="block text-sm text-gray-500 mb-2">MENSAGEM</label>
<textarea class="form-input h-32 resize-none" placeholder="Conte sobre seu projeto..."></textarea>
</div>
<button type="button" class="bg-[var(--accent-color)] text-white px-10 py-4 font-bold tracking-widest hover:bg-white hover:text-black transition duration-300">
ENVIAR MENSAGEM
</button>
</form>
<!-- Redes Sociais -->
<div class="flex justify-center space-x-12">
<a href="#" class="text-3xl text-gray-400 hover:text-[var(--accent-color)] transition"><i class="fab fa-instagram"></i></a>
<a href="#" class="text-3xl text-gray-400 hover:text-[var(--accent-color)] transition"><i class="fab fa-linkedin"></i></a>
<a href="#" class="text-3xl text-gray-400 hover:text-[var(--accent-color)] transition" title="Lattes">
<i class="fas fa-graduation-cap"></i> <!-- Ícone representativo para Lattes -->
</a>
</div>
<footer class="mt-20 text-gray-600 text-sm">
© 2024 Portfólio. Todos os direitos reservados.
</footer>
</div>
</section>
<!-- SCRIPT DE INTERATIVIDADE -->
<script>
// Função para alternar o menu overlay
function toggleMenu() {
const menu = document.getElementById('fullscreen-menu');
menu.classList.toggle('active');
// Travar scroll do body quando menu estiver aberto
if(menu.classList.contains('active')) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = 'auto';
}
}
// Rolagem suave para as seções (simulando a abertura de página)
function scrollToSection(id) {
const element = document.getElementById(id);
if (element) {
element.scrollIntoView({ behavior: 'smooth' });
}
}
// Efeito de scroll horizontal com roda do mouse (Opcional, para desktop)
const sliderContainer = document.getElementById('sliderContainer');
sliderContainer.addEventListener('wheel', (evt) => {
// Apenas se estivermos na seção Home e a tela for grande
if (window.scrollY < 100 && window.innerWidth > 768) {
evt.preventDefault();
sliderContainer.scrollLeft += evt.deltaY;
}
});
</script>
</body>
</html>