Cómo se hizo ÓRBITA

One-page para una agencia de diseño web y marketing local. Un solo index.html autocontenido: HTML + CSS + JavaScript vanilla, cero dependencias, listo para Hostinger.

Concepto de diseño

• Dark mode "espacial": fondo casi negro con aurora de gradientes animados (tres blobs gigantes con filter:blur(90px) moviéndose en bucle) + textura de grano SVG inline.
• Acentos neón: lima eléctrico como color de acción sobre violeta/magenta/cian. El texto degradado se hace con background-clip:text.
• Tipografía: Syne (display geométrica con carácter) + Space Grotesk. Titular con mezcla de relleno, degradado y "outline" (-webkit-text-stroke).

Técnicas usadas

• Glow que sigue al cursor (div fijo con gradiente radial posicionado con pointermove).
• Bento grid de servicios con tarjetas glassmorphism y spotlight interno que sigue al ratón mediante variables CSS --mx/--my.
• Chips flotantes en el hero con animación de flotación desfasada.
• Ticker infinito de sectores con texto alternando relleno/outline.
• Contadores animados, reveals con IntersectionObserver, navbar flotante con blur al hacer scroll.
• Modales legales RGPD/LSSI + banner de cookies con localStorage.
• Responsive completo con menú off-canvas y prefers-reduced-motion.

Proceso (3 iteraciones)

1. Dirección de arte + copy: el sector agencia exige demostrar oficio: se eligió un lenguaje visual "premium tech" y copy orientado a negocio local (nada de jerga).
2. Revisión desktop: verificación de bento grid, planes, testimonios y CTA final; ajuste de jerarquías.
3. Revisión responsive: se corrigió un shorthand padding del hero/secciones que anulaba el padding lateral del contenedor en móvil (ahora padding-block). Verificado en 375px.

Personalízalo

Subirlo a Hostinger

1. hPanel → Administrador de archivos → public_html.
2. Sube index.html + carpeta guide/.
3. La web queda en tu dominio y esta guía en /guide.