/* ══════════════════════════════════════════════════════════════════════════ Módulo "Cada cual con sus diablos" — 3 columnas de diablos en loop con parallax + logo central con tilt 3D. Los efectos "boil" van pre-horneados: cada diablo tiene su archivo con 3 fotogramas (assets/diablos-import/diablos/dNN.webp) y el logo su sprite (logo-boil-sheet.webp) — cero filtros SVG en vivo. Fuentes y material de horneado: ../mololo_web-fuentes/ (fuera del repo). La lógica vive en js/diablos-modulo.js. ══════════════════════════════════════════════════════════════════════════ */ .diablos-modulo { /* ancho de cada columna: bájalo para juntar las laterales al centro */ --diablos-col-width: 25vw; position: relative; height: 400vh; /* altura/recorrido del módulo. Súbelo/bájalo para alargar o acortar el tramo */ background: #f4ead2; border-bottom: 3px solid #111111; /* línea que separa este módulo del siguiente */ } .diablos-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; } /* Envuelve solo las columnas: los diablos se desvanecen suavemente cerca del borde inferior (el fondo crema se queda; el logo no se ve afectado porque está fuera de este wrapper) */ .diablos-cinta { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 90%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0, #000 90%, transparent 100%); } /* 3 columnas pegadas entre sí (sin hueco) y centradas en el viewport. margen lateral = (100vw - 3 * ancho) / 2 */ .diablos-track { position: absolute; top: 0; width: var(--diablos-col-width); display: flex; flex-direction: column; align-items: center; gap: 22px; will-change: transform; } .diablos-track--left { left: calc((100vw - 3 * var(--diablos-col-width)) / 2); } .diablos-track--center { left: calc((100vw - 3 * var(--diablos-col-width)) / 2 + var(--diablos-col-width)); } .diablos-track--right { left: calc((100vw - 3 * var(--diablos-col-width)) / 2 + 2 * var(--diablos-col-width)); } /* TAMAÑO DEL DIABLO: sube width/max-width para hacerlos más grandes. Cada diablo tiene SU PROPIO archivo (assets/diablos-import/diablos/dNN.webp, 768×2304 = 3 fotogramas de boil apilados en vertical) que fija el JS. Ojo: NO volver a un sprite sheet único — con 13824px de alto superaba el tamaño máximo de textura de las GPU móviles y rompía el rendimiento. */ .diablo-icon { width: 31vw; max-width: 384px; min-width: 137px; aspect-ratio: 1 / 1; background-repeat: no-repeat; background-size: 100% 300%; /* 3 fotogramas apilados en vertical */ opacity: 0.9; pointer-events: none; } /* "hervor" horneado: solo cambia background-position-y (coste casi nulo) */ .diablo-icon.boil { animation: diabloBoil 0.45s steps(1) infinite; } @keyframes diabloBoil { 0% { background-position-y: 0%; } 33% { background-position-y: 50%; } 66% { background-position-y: 100%; } 100% { background-position-y: 0%; } } /* ── Logo central "cada cual con sus diablos" ─────────────────────────── */ .diablos-logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; display: flex; flex-direction: column; align-items: center; cursor: pointer; pointer-events: none; /* se activa por JS cuando el logo es visible */ transition: filter 0.3s ease; } .diablos-logo.is-visible { pointer-events: auto; } /* Sprite de 3 fotogramas (boil + sombra ya incluida en la imagen). El frame es 980×758 con el logo de 760px centrado (el resto es aire para la sombra). */ .diablos-logo__mark { width: min(75vw, 490px); aspect-ratio: 980 / 758; display: block; /* el background-image lo pone JS en el arranque diferido (carga perezosa) */ background-repeat: no-repeat; background-size: 100% 300%; /* 3 fotogramas apilados en vertical */ animation: logoBoil 0.45s steps(1) infinite; /* el tilt 3D lo escribe JS en línea cada frame; esta transición corta lo amortigua para que siga al ratón con suavidad */ transition: transform 0.15s ease-out, filter 0.3s ease; } /* hover SOLO sobre el logo (no sobre el botón): shiny — el boil sigue vivo */ .diablos-logo.is-visible .diablos-logo__mark:hover { filter: drop-shadow(0 0 24px rgba(255, 236, 190, 0.7)) brightness(1.06); } @keyframes logoBoil { 0% { background-position-y: 0%; } 33% { background-position-y: 50%; } 66% { background-position-y: 100%; } 100% { background-position-y: 0%; } } /* ── Botón "saber más": entrada al proyecto de los diablos ────────────── */ /* mismo lenguaje que .btn-tienda / .btn-ver-mas de landing.css. Aparece con fade-in ~1s DESPUÉS de que el logo termine de revelarse (la clase .is-on la pone JS). Hover: solo un poco de zoom, sin shine. */ .diablos-btn { position: relative; z-index: 1; /* por encima del aire transparente del frame del logo */ margin-top: -44px; /* se mete en el aire de la sombra para quedar pegado al logo */ font-family: var(--font-display, "Bebas Neue", Arial, sans-serif); font-size: 0.95rem; letter-spacing: 0.14em; color: #ffffff; background: #111111; padding: 13px 36px; text-decoration: none; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity 0.5s ease, transform 0.25s ease; } .diablos-btn.is-on { opacity: 1; transform: none; pointer-events: auto; } .diablos-btn.is-on:hover { transform: scale(1.07); } @media (prefers-reduced-motion: reduce) { .diablo-icon.boil, .diablos-logo__mark { animation: none; } } /* ── Responsive: en móvil solo queda la columna central (misma dirección) ── */ @media (max-width: 768px) { .diablos-modulo { --diablos-col-width: 84vw; } .diablos-track--left, .diablos-track--right { display: none; } .diablos-track--center { left: calc((100vw - var(--diablos-col-width)) / 2); } .diablo-icon { width: 80vw; min-width: 0; } .diablos-logo__mark { width: 94vw; } .diablos-btn { font-size: 0.78rem; padding: 10px 26px; margin-top: -52px; /* el frame del logo crece en móvil → más aire que compensar */ } } /* ══════════════════════════════════════════════════════════════════════════ NAVBAR EN MODO DIABLOS Mientras el scroll está dentro del módulo, el navbar adopta la paleta del proyecto (JS pone/quita la clase .nav-diablos en