/* ============================================= ENSOCLIM — Escena cinemática del hero Se carga DESPUÉS de styles.css y solo añade el escenario. Los tokens (--ink, --red, --shadow…), .svc-card, .carousel-* y los estilos .h-* / .s-* del SVG vienen de allí: aquí no se redefine ninguno para no pisarlos. Todo el movimiento lo escribe cinema.js en estas variables. La usan la home (/) y el banco de pruebas (/demo-3d). ============================================= */ :root { /* Puntero suavizado, -0.5 a 0.5 */ --mx: 0; --my: 0; /* Conjunto de la escena */ --back-opacity: 1; --back-x: 0px; --back-y: 0px; --back-scale: 0.76; --sun-y: 0px; --sun-scale: 1; /* Caja compartida por todas las capas: fija a propósito. Si cambiara, cambiaría para todas por igual y el encaje seguiría siendo exacto. */ --scene-bottom: 5vh; --scene-width: 67.2vw; /* Base común: casa, circuito y unidad la consumen tal cual, así que permanecen pegados pase lo que pase con el zoom. Cubierta y placas parten de esta misma base y le suman su desvío, cero en reposo. */ --scene-x: -50%; --scene-y: 0px; --scene-scale: 1; --roof-x: -50%; --roof-y: 0px; --roof-scale: 1; --roof-opacity: 1; --panel-left-x: -50%; --panel-left-y: 0px; --panel-left-scale: 1; --panel-right-x: -50%; --panel-right-y: 0px; --panel-right-scale: 1; --house-brightness: 1; --circuit-opacity: 0; /* Velado global */ --blur-px: 0px; --back-brightness: 1; --shade-opacity: 1; --shade-z: 2; --shade-top-alpha: 0; --shade-mid-alpha: 0; --shade-bottom-alpha: 0; /* Crema cálida en vez del azul de la referencia: la escena es luminosa, así que el velo aclara hacia el fondo del sitio, no oscurece. */ --blur-tint: 233, 224, 205; /* ACTO 1 · logo. Comfortaa es lo más cercano que he encontrado en Google Fonts al trazo monolineal y redondeado del logotipo. Para probar otra, cambia solo esta línea (y el del ): Quicksand, Poppins o Jost son las alternativas que más se le parecen. */ --brand-font: 'Comfortaa', 'Manrope', sans-serif; --brand-y: 0px; --brand-scale: 1; --brand-opacity: 1; /* ACTO 2 · titular */ --hero-panel-opacity: 0; --hero-panel-y: calc(-50% + 58px); /* ACTO 3 · servicios */ --services-x: 60vw; --services-opacity: 0; --services-visibility: hidden; } /* styles.css deja html con scroll-behavior: smooth, que aquí pelea con el scrubbing. El resto de su base (tipografía, color, box-sizing) se conserva. */ html { scroll-behavior: auto; } .site-shell { min-height: 100vh; } /* ——— APARATO DE SCROLL ——— La sección mide una pantalla más 2600px de recorrido. El stage se queda pegado arriba mientras esos 2600px pasan por debajo: eso es el scrubbing. */ .cinema-scroll { position: relative; height: calc(100vh + 2600px); } .stage { position: sticky; top: 0; height: 100vh; min-height: 620px; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse 62% 55% at 4% 98%, rgba(110,158,186,0.16) 0%, transparent 60%), radial-gradient(ellipse 62% 56% at 88% -4%, rgba(217,119,6,0.22) 0%, rgba(217,119,6,0.09) 34%, transparent 64%), linear-gradient(165deg, #E9E6DF 0%, #E5E1D8 55%, #E0DBD0 100%); } .world, .back-stack, .sky, .shade, .scene-layer, .brand-mark, .hero-panel, .services-stage { position: absolute; } .world { inset: 0; overflow: hidden; } .sky { inset: 0; z-index: 0; background: radial-gradient(circle 760px at 88% -6%, rgba(255,190,90,0.34) 0%, rgba(217,119,6,0.20) 26%, rgba(217,119,6,0.07) 50%, transparent 72%); filter: blur(var(--blur-px)) brightness(var(--back-brightness)); pointer-events: none; } /* ——— CABECERA ——— Es la .nav del sitio sin tocar: todo su aspecto sale de styles.css, aquí solo se define cómo entra. Arranca replegada hacia arriba y baja cuando el logotipo grande se retira, para que el primer acto quede despejado. El deslizamiento lo hereda del `transition: all` que .nav ya trae. */ .nav { opacity: 0; transform: translateY(-100%); pointer-events: none; } .nav.is-revealed { opacity: 1; transform: translateY(0); pointer-events: auto; } /* En móvil las cifras laterales no caben y el primer acto se quedaría sin teléfono ni botón de presupuesto durante 650px de scroll. Ahí la barra está desde el principio: el contacto pesa más que el efecto. */ @media (max-width: 900px) { .nav { opacity: 1; transform: none; pointer-events: auto; } } /* ——— CAPAS DE LA ESCENA ——— Todas comparten viewBox y caja: con los transforms a cero encajan exactamente como en el SVG original del hero. */ .scene-layer { left: 50%; bottom: var(--scene-bottom); width: min(var(--scene-width), 1500px); height: auto; display: block; overflow: visible; /* Un solo origen para todas: con orígenes distintos, dos capas a la misma escala se separan, y el tejado dejaría de apoyar en los muros. */ transform-origin: 50% 48%; user-select: none; will-change: transform, opacity, filter; pointer-events: none; } .back-stack { top: 0; bottom: 0; left: -3vw; right: -3vw; z-index: 1; opacity: var(--back-opacity); transform: translate3d(var(--back-x), var(--back-y), 0) scale(var(--back-scale)); transform-origin: 50% 100%; will-change: transform, filter, opacity; } .layer-sun { z-index: 1; opacity: 0.9; transform: translate3d(-50%, var(--sun-y), 0) scale(var(--sun-scale)); filter: blur(var(--blur-px)) brightness(var(--back-brightness)); } .layer-house { z-index: 3; transform: translate3d(var(--scene-x), var(--scene-y), 0) scale(var(--scene-scale)); filter: brightness(var(--house-brightness)); } .layer-roof { z-index: 4; opacity: var(--roof-opacity); transform: translate3d(var(--roof-x), var(--roof-y), 0) scale(var(--roof-scale)); } .layer-panels { z-index: 5; } .layer-panels-left { transform: translate3d(var(--panel-left-x), var(--panel-left-y), 0) scale(var(--panel-left-scale)); } .layer-panels-right { transform: translate3d(var(--panel-right-x), var(--panel-right-y), 0) scale(var(--panel-right-scale)); } /* Unidad y circuito comparten transform con la casa: son el mismo objeto físico repartido en capas, y deben moverse como uno solo. */ .layer-unit { z-index: 6; transform: translate3d(var(--scene-x), var(--scene-y), 0) scale(var(--scene-scale)); } .layer-circuit { z-index: 7; opacity: var(--circuit-opacity); transform: translate3d(var(--scene-x), var(--scene-y), 0) scale(var(--scene-scale)); } /* ——— VELO · sube al frente solo cuando hay desenfoque que justificar ——— */ .shade { inset: 0; z-index: var(--shade-z); pointer-events: none; opacity: var(--shade-opacity); background: linear-gradient(180deg, rgba(var(--blur-tint), var(--shade-top-alpha)) 0%, rgba(var(--blur-tint), var(--shade-mid-alpha)) 48%, rgba(var(--blur-tint), var(--shade-bottom-alpha)) 100%); } /* ——— ACTO 1 · el logo ——— Va entre el sol (z1) y los muros (z3), así que la casa lo tapa por delante. Se ancla por `bottom` y no por `top` a propósito: .back-stack se escala 0.76 desde su borde inferior, así que anclar abajo es lo único que mantiene el logotipo a la misma altura respecto al tejado en cualquier pantalla. Ese 83% es el único número que hay que tocar para subirlo o bajarlo. */ .brand-mark { left: 50%; bottom: 83%; z-index: 2; width: min(96vw, 1240px); text-align: center; transform: translate3d(-50%, var(--brand-y), 0) scale(var(--brand-scale)); opacity: var(--brand-opacity); will-change: transform, opacity; pointer-events: none; } .brand-mark__name { display: block; font-family: var(--brand-font); font-size: clamp(58px, 12.4vw, 186px); font-weight: 600; letter-spacing: 0.05em; line-height: 0.9; color: var(--red); } .brand-mark__tag { display: block; margin-top: 0.42em; font-family: var(--brand-font); font-size: clamp(12px, 2.3vw, 33px); font-weight: 400; letter-spacing: 0.2em; line-height: 1; /* El blanco del logotipo original está pensado para fondo oscuro: sobre este crema se perdía por completo. */ color: var(--ink-soft); } /* ——— ACTO 1 · las cifras de los márgenes ——— Van fuera de .back-stack: así no las encoge su escala y el texto queda nítido. Aquí es donde --mx y --my por fin sirven de algo: derivan un poco con el puntero, en sentido contrario a la casa, y eso separa los planos. */ .side-stats { position: absolute; top: 50%; z-index: 4; display: flex; flex-direction: column; gap: clamp(28px, 5vh, 58px); opacity: var(--brand-opacity); transform: translate3d(calc(var(--mx) * -16px), calc(-50% + var(--my) * -8px), 0); will-change: transform, opacity; pointer-events: none; } .side-stats--left { left: clamp(24px, 3.4vw, 68px); text-align: left; } .side-stats--right { right: clamp(24px, 3.4vw, 68px); text-align: right; } .side-stat { position: relative; padding-left: 18px; } .side-stats--right .side-stat { padding-left: 0; padding-right: 18px; } .side-stat::before { content: ''; position: absolute; left: 0; top: 3px; bottom: 3px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--sun-fill) 0%, rgba(217,119,6,0) 100%); } .side-stats--right .side-stat::before { left: auto; right: 0; } .side-stat__num { display: block; font-size: clamp(26px, 2.3vw, 40px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--ink); } .side-stat__label { display: block; max-width: 155px; margin-top: 9px; font-size: 11.5px; font-weight: 600; letter-spacing: 1.4px; line-height: 1.45; text-transform: uppercase; color: var(--muted); } .side-stats--right .side-stat__label { margin-left: auto; } /* Por debajo de este ancho la casa ocupa 67vw y no queda margen real. */ @media (max-width: 1240px) { .side-stats { display: none; } } /* ——— ACTO 1 · la cinta de servicios ——— Va pegada al borde inferior y se lee como capa de interfaz, no como parte de la escena: por eso lleva filete y un fondo crema que garantiza que el texto contrasta aunque por detrás pase la casa. */ .service-ticker { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; overflow: hidden; padding: 15px 0; border-top: 1px solid rgba(23, 19, 15, 0.10); background: linear-gradient(180deg, rgba(233, 230, 223, 0) 0%, rgba(233, 230, 223, 0.88) 45%, rgba(233, 230, 223, 0.97) 100%); opacity: var(--brand-opacity); pointer-events: none; will-change: opacity; /* Difumina los extremos: sin esto el bucle entra y sale de golpe. */ -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%); } /* Sin gap en la pista: el -50% debe valer exactamente un grupo, y un hueco intermedio lo desajustaría. La separación la pone el padding del grupo. */ .service-ticker__track { display: flex; width: max-content; animation: tickerScroll 52s linear infinite; } @keyframes tickerScroll { to { transform: translate3d(-50%, 0, 0); } } .service-ticker__group { display: block; padding-right: 34px; white-space: nowrap; font-size: 12.5px; font-weight: 700; letter-spacing: 2.2px; line-height: 1; text-transform: uppercase; color: var(--ink-soft); } .service-ticker__group i { font-style: normal; margin: 0 12px; color: var(--sun-fill); } @media (max-width: 640px) { .service-ticker { padding: 12px 0; } .service-ticker__group { font-size: 11px; letter-spacing: 1.6px; } } @media (prefers-reduced-motion: reduce) { .service-ticker__track { animation: none; } } /* ——— ACTO 2 · el titular ——— */ .hero-panel { left: 50%; top: 46%; z-index: 9; width: min(920px, calc(100vw - 48px)); text-align: center; opacity: var(--hero-panel-opacity); transform: translate3d(-50%, var(--hero-panel-y), 0); will-change: transform, opacity; pointer-events: none; } .hero-panel__title { font-size: clamp(38px, 5.2vw, 76px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.0; color: var(--ink); margin-bottom: 26px; } .hero-panel__sub { max-width: 620px; margin: 0 auto 34px; font-size: clamp(16px, 1.5vw, 19px); font-weight: 400; line-height: 1.7; color: var(--ink-soft); } .hero-panel__ctas { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; pointer-events: auto; } /* ——— ACTO 3 · los servicios, con el carrusel original ——— */ .services-stage { left: 50%; top: 50%; z-index: 10; width: min(1240px, calc(100vw - 56px)); text-align: center; opacity: var(--services-opacity); visibility: var(--services-visibility); transform: translate3d(calc(-50% + var(--services-x)), -50%, 0); will-change: transform, opacity; } .services-stage .section-tag { margin-bottom: 10px; } .services-stage__title { font-size: clamp(26px, 2.6vw, 40px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; color: var(--ink); margin-bottom: 30px; } /* El carrusel es el de siempre; aquí solo se le da alineación dentro del escenario y se le quita la sombra de arrastre al pasar por delante. */ .services-stage .carousel-wrap { text-align: left; } .services-stage__more { margin-top: 26px; pointer-events: auto; } .services-stage .svc-card__art svg { height: 96px; } @media (max-width: 1100px) { .brand-mark { bottom: 80%; width: min(98vw, 920px); } .services-stage__title { margin-bottom: 22px; } } @media (max-width: 640px) { .stage { min-height: 640px; } .brand-mark { bottom: 76%; width: 98vw; } .hero-panel { top: 44%; } .hero-panel__sub { margin-bottom: 26px; } .services-stage__title { font-size: 22px; margin-bottom: 18px; } } @media (prefers-reduced-motion: reduce) { .scene-layer, .back-stack, .brand-mark, .hero-panel, .services-stage { transition: none; } }