TID.Nueva web / Home — v1

Arrastra para mover · Ctrl/⌘ + rueda para zoom · clic en el % para encajar

Home

Mockup alta fidelidad · Octubre 2026

01 — Header

Sticky. Barra secundaria Madrid / Tenerife que se oculta al hacer scroll. CTA fijo.

02 — Hero

H1 único. Esfera interactiva con los 8 frentes: hover pausa y resalta, clic despliega.

03 — Quiénes somos

Posicionamiento + sello de contexto. Sin métricas inventadas.

04 — Problema

5 piezas sueltas que se alinean y conectan al entrar en pantalla.

05 — Método

4 pasos editoriales. Hover invierte la fila a fondo oscuro.

06 — Servicios

Hub SEO → /servicios/. 8 enlaces con glifo propio; hover en acento.

07 — Sectores

Lista tipográfica + panel con el problema del sector → /sectores/.

08 — Territorio

→ /ubicaciones/tenerife/ y /ubicaciones/madrid/.

09 — Caso

Plantilla marcada como contenido pendiente → /casos-de-exito/.

10 — Principios

Identidad: palabra gigante que se ilumina al hover.

11 — CTA final

→ /diagnostico-marketing/. Único bloque con fondo acento.

12 — Footer

Servicios, sectores, ubicaciones, casos, nosotros, recursos.

Desktop · 1440px

Mobile · 390px

Color

  • Ink#0F1726
  • Paper#F8F6F0
  • Eléctrico#3EF0DE
  • Eléctrico prof.#007F8C
  • Señal#F07A2A

Tipografía

Aa

Bricolage Grotesque · titulares 800

Aa

Instrument Sans · texto 400–600

AA

JetBrains Mono · etiquetas

Reglas

  • Esquinas casi rectas (4px)
  • Alternancia claro / oscuro por sección
  • Acento solo en acción y foco
  • Motion sutil, respeta “reducir movimiento”
  • Grid 12 col · máx. 1280px