Suhail Abderrahman
Project type

Suhail Abderrahman

Yasmin Haidar
Project type

Yasmin Haidar

Omar Chaib
Project type

Omar Chaib

Naila Bakri
Project type

Naila Bakri

Dalia Bassaid
Project type

Dalia Bassaid

Tarek Ziani
Project type

Tarek Ziani

Rami Baida
Project type

Rami Baida

Farah Rifai
Project type

Farah Rifai

Raia Kaddour
Project type

Raia Kaddour

Gaia Morales
Project type

Gaia Morales

Yazdan
Project type

Yazdan

Adam Ziani
Project type

Adam Ziani

Aïda Belhadj
Project type

Aïda Belhadj

Suhail Al-Harbi
Project type

Suhail Al-Harbi

Yara Chaibi
Project type

Yara Chaibi

Aïssam Cherkaoui
Project type

Aïssam Cherkaoui

Zaina Qureshi
Project type

Zaina Qureshi

Karim Belaidi
Project type

Karim Belaidi

Leïla Ghandaia
Project type

Leïla Ghandaia

Ismaïl Sabbagh
Project type

Ismaïl Sabbagh

Thaïs Bennani
Project type

Thaïs Bennani

Olivia Costa
Project type

Olivia Costa

Faisal Nasser
Project type

Faisal Nasser

Nicolás Gaitán
Project type

Nicolás Gaitán

Amara Saiz
Project type

Amara Saiz

Giulia Moretti
Project type

Giulia Moretti

Thiago Abad
Project type

Thiago Abad

Kiara Delvaux
Project type

Kiara Delvaux

Adrián Cano
Project type

Adrián Cano

Aitana López
Project type

Aitana López

Lia Byte
Project type

Lia Byte

Alex Laine
Project type

Alex Laine

Kai Toledo
Project type

Kai Toledo

Olivia Roa
Project type

Olivia Roa

CLIENTS

AUDI
DOUGLAS
AMAZON
LLONGUERAS
L'OREAL
HELLMAN'S
SONY PICTURES
PRIME
GOLDEN CONCEPT
FANVUE
COCA-COLA

CLIENTS

HEALTHY POKE
ELISAVA
MAHOU
UDIA
BANCO SANTANDER
BBVA
VOGUE
GOA ORGANICS
CHARO RUIZ
RAZZER
LYNK & CO

MEDIA

FORBES
BBC
ABC
THE TIMES
EL PERIÓDICO
EURONEWS
FINANCIAL TIMES
LA VANGUARDIA
WIRED
GLAMOUR
NEO2

NEWS

XATAKA
REASONWHY
INFOBAE
NETINFLUENCER
MUNDO DEPORTIVO
SPORT
MARCA
LA RAZÓN
THE SUN
THE GUARDIAN
GRAFFICA

LOCATIONS

BARCELONA
MÉXICO
ENGLAND
UNITED ARAB EMIRATES

COPYRIGHT 2026 © THE CLUELESS AIGENCY S.L.

COPYRIGHT 2026 © THE CLUELESS AIGENCY S.L.

// Buscar el contenedor del video var bgVideoDiv = document.querySelector('.semplice-cover .background-video'); if (!bgVideoDiv) return; var originalVideo = bgVideoDiv.querySelector('video'); if (!originalVideo) return; // ── Crear estructura del carrusel ────────── bgVideoDiv.style.position = 'relative'; bgVideoDiv.style.overflow = 'hidden'; // Crear los elementos de video var videoElements = []; videos.forEach(function (src, i) { var vid = document.createElement('video'); vid.src = src; vid.autoplay = (i === 0); vid.muted = true; vid.playsInline = true; vid.setAttribute('playsinline', ''); vid.setAttribute('webkit-playsinline', ''); vid.preload = 'auto'; vid.style.cssText = 'position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;' + 'opacity:' + (i === 0 ? '1' : '0') + ';transition:opacity 1s ease;z-index:1;'; bgVideoDiv.appendChild(vid); videoElements.push(vid); }); // Eliminar el video original originalVideo.remove(); // ── Crear dots ───────────────────────────── var dotsContainer = document.createElement('div'); dotsContainer.style.cssText = 'position:absolute;bottom:80px;left:50%;transform:translateX(-50%);' + 'display:flex;gap:10px;z-index:10;'; var dots = []; videos.forEach(function (_, i) { var dot = document.createElement('button'); dot.style.cssText = 'width:10px;height:10px;border-radius:50%;border:2px solid rgba(255,255,255,0.3);' + 'background:' + (i === 0 ? 'rgba(255,255,255,0.3)' : 'transparent') + ';cursor:pointer;padding:0;' + 'transition:background 0.3s ease;outline:none;'; dot.setAttribute('aria-label', 'Video ' + (i + 1)); dot.addEventListener('click', function () { goToVideo(i); }); dotsContainer.appendChild(dot); dots.push(dot); }); bgVideoDiv.appendChild(dotsContainer); // ── Lógica del carrusel ──────────────────── var currentIndex = 0; var isTransitioning = false; function goToVideo(index) { if (index === currentIndex || isTransitioning) return; isTransitioning = true; var prevIndex = currentIndex; // Fade out del anterior videoElements[prevIndex].style.opacity = '0'; // Activar el nuevo videoElements[index].currentTime = 0; videoElements[index].play(); videoElements[index].style.opacity = '1'; // Actualizar dots dots[prevIndex].style.background = 'transparent'; dots[index].style.background = 'rgba(255,255,255,0.3)'; currentIndex = index; // Pausar el video anterior DESPUÉS del fade (para que no se vea el corte) setTimeout(function () { videoElements[prevIndex].pause(); videoElements[prevIndex].currentTime = 0; isTransitioning = false; }, 1000); } function nextVideo() { var next = (currentIndex + 1) % videos.length; goToVideo(next); } // ── Zonas de click izquierda/derecha ─────── var clickZoneLeft = document.createElement('div'); clickZoneLeft.style.cssText = 'position:absolute;top:0;left:0;width:50%;height:100%;z-index:5;cursor:pointer;'; clickZoneLeft.addEventListener('click', function () { var prev = (currentIndex - 1 + videos.length) % videos.length; goToVideo(prev); }); bgVideoDiv.appendChild(clickZoneLeft); var clickZoneRight = document.createElement('div'); clickZoneRight.style.cssText = 'position:absolute;top:0;right:0;width:50%;height:100%;z-index:5;cursor:pointer;'; clickZoneRight.addEventListener('click', function () { nextVideo(); }); bgVideoDiv.appendChild(clickZoneRight); // Cuando termina un video, pasar al siguiente videoElements.forEach(function (vid, i) { vid.addEventListener('ended', function () { if (i === currentIndex) { nextVideo(); } }); }); // Iniciar primer video videoElements[0].play(); })();