landing-page-cinematografica

Sitio cinematográfico

Le otorgas al sitio la sensación de una pieza bien dirigida: cada desplazamiento revela algo, cada botón responde con peso, la tipografía tiene escala de cartel. El cliente final es dueño de un negocio local y quien visita está en el móvil, a menudo en 4G. Por eso el movimiento es ligero, nativo del navegador, y nunca interfiere con la lectura ni con el clic en WhatsApp.

Referencia viva del estándar: el template que viene con la skill fazer-site (fazer-site/template/). Ante dudas sobre ritmo, escala o densidad, abre la referencia e imita el acabado, no el contenido.

Axiomas

1. La identidad es del cliente. El color y la tipografía salen del logo, la fachada y el Instagram del negocio. Nada de paleta prefabricada de catálogo. Solo cuando no existe logo en ningún lado entra un color provisional, declarado como tal.
2. El nombre del negocio está en el hero, grande. Hero sin el nombre fue rechazado.
3. La foto es del negocio, nunca de banco. Fachada, tienda, producto, resultado. Sin foto real de alguna parte, el bloque queda marcado como ilustrativo o se elimina.
4. El movimiento sirve a la lectura. Si una animación retrasa el contenido, traba el desplazamiento o desaparece con el botón, se elimina.
5. Ligero por defecto. HTML, CSS y IntersectionObserver resuelven. Biblioteca de animación (GSAP y similares) solo entra cuando un efecto aprobado no sale sin ella, y nunca para algo que el CSS ya hace.

Prohibido (cada item ya fue rechazado en proyecto real)

• Tarjetas que se apilan o descienden al desplazarse (sticky stacking, pin con escala y desenfoque). No entra.
• Recorte redondeado, en arco o círculo en foto de tienda, fachada, producto o ambiente. Contenedores con border-radius grande también salen. Esquinas vivas o corte diagonal (clip-path) son el estándar.
• Foto de fondo detrás de las reseñas.
• Serifado fino e itálico como título, y dorado como acento estándar. Se lee como "delicado". El tono solicitado es masculino, agresivo, moderno, salvo que la marca del cliente indique otra cosa.
• Tabla de precios inventada y números inventados. Precio, nota, plazo, testimonio y conteo solo entran si son públicos del propio negocio.
• Adorno de software sin sentido para negocio local: tarjetas fingiendo panel en vivo, "System Operational", cursor que hace clic solo, máquina de escribir de log.

Qué da el efecto cinematográfico

Tipografía de cartel. Una familia condensada y pesada para títulos (ej.: Barlow Condensed 800 itálico), otra limpia para el cuerpo. Títulos grandes (clamp() hasta ~90-140 px en escritorio), interlineado corto, text-wrap: balance. El contraste de escala entre título y texto es el efecto principal; cuesta cero.

Hero. Nombre del negocio enorme, una frase concreta de lo que hace y dónde, pruebas cortas (nota, reseñas, seguidores, horario) y el botón principal. En escritorio, texto y foto lado a lado. En móvil el orden es: nombre, frase, pruebas, botón, foto. La foto puede tener esquinas cortadas en diagonal y un zoom lento (scale 1 a 1.06 en ~20 s).

Entrada escalonada. Al cargar, los elementos del hero suben 16-40 px y aparecen en secuencia (retraso de ~80 ms entre ellos). Secciones inferiores se revelan con el mismo movimiento al entrar en pantalla, mediante IntersectionObserver con threshold bajo.

Textura. Ruido SVG <feTurbulence> al 5% de opacidad sobre fondos planos del hero y los destacados, para eliminar la apariencia de gradiente digital.

Botones con peso. overflow: hidden con una capa que se desliza para cambiar el color al pasar el ratón, leve scale(1.03) con cubic-bezier(0.25, 0.46, 0.45, 0.94). Blanco de toque mínimo de 44 px.

Destacado de prueba en pantalla ancha. Una reseña real en tamaño de manifiesto, fondo oscuro liso, con las palabras iluminándose en secuencia según el desplazamiento. Una por sitio; el resto de reseñas en cuadrícula simple.

Número que cuenta. La nota u otro número real cuenta de 0 hasta el valor al entrar en pantalla.

Franja de servicios en contraste. Una sección clara en medio del sitio oscuro (o al revés), con números grandes de orden (01, 02...), corta el ritmo y marca el cambio de tema.

Franja continua (marquee) con servicios o categorías, en color de acento, opcional.

Reglas técnicas

• Base: HTML estático con CSS en el propio archivo, salvo cuando el proyecto ya tiene otra base. En proyecto existente, preserva la base y la copia aprobada; aplica solo esta capa.
• Fuentes mediante Google Fonts con preconnect y display=swap.
• Imagen del hero con fetchpriority="high"; el resto con loading="lazy", width y height declarados.
• Todo dentro de @media (prefers-reduced-motion: reduce) desactiva animación y transición.
• Móvil: barra fija abajo con WhatsApp y Llamar, que desaparece cuando un campo del formulario recibe foco y mientras el botón del hero está visible. Sin desplazamiento horizontal en 360 px.

Listo cuando

• Las capturas de 360, 375 y 1440 px se han abierto y revisado, y ningún item de la lista de prohibidos aparece.
• El nombre del negocio está en el hero y las fotos son del propio negocio o están marcadas como ilustrativas.
• Con prefers-reduced-motion activado, el sitio aparece completo y legible, sin contenido oculto esperando animación.