Cota España - diseño web civic tech para una ingeniería de infraestructuras

Cota España es la edición española de nuestra empresa ficticia de ingeniería civil y software geoespacial, con sede en Madrid y oficina de proyectos en Getafe. Las mismas plantillas que en EE. UU., pero con voz española: Ministerio de Transportes y consejerías en lugar de State DOTs, obras en el Corredor A-2 y el Valle del Ebro, licitaciones públicas y un diseño cálido y luminoso.

Ficha del proyecto

• Cliente: Cota Ibérica, S.L., Madrid (ficticia)
• Sector: Ingeniería civil, obra pública y software geoespacial
• Mercados: Sede en Madrid, obras de A Coruña a Algeciras
• Servicios: Localización de mercado · Redacción · Adaptación de marca · Diseño web para civic tech · Accesibilidad (WCAG 2.2 AA) · Bases de SEO
• Plantillas: 8 plantillas compartidas con todas las ediciones de Cota
• Tecnología: HTML, CSS y JavaScript escritos a mano; un archivo de textos y un tema por mercado

El encargo

Una web de infraestructuras que habla como la administración española

Las administraciones públicas y las constructoras esperan claridad y cercanía. La edición española sustituye cada organismo, lugar y proceso: licitaciones públicas en lugar de bond measures, inauguraciones oficiales, precisión RTK y planes de inversión pública, con un tú cercano y una paleta de terracota y cobalto.

Pensado para España

Qué cambia realmente entre la edición estadounidense y esta

• Sede - Edición EE. UU.: Golden, Colorado · España: Madrid, oficina en Getafe
• Proyectos - Edición EE. UU.: I-70 Corridor, Juniper Valley, Cedar River Crossing · España: Corredor A-2, Valle del Ebro, A Coruña, Algeciras
• Organismos - Edición EE. UU.: State DOTs, OSHA, EPA, FEMA · España: Ministerio de Transportes y Movilidad Sostenible, consejerías de Fomento
• Financiación - Edición EE. UU.: Bond measures · España: Licitación pública y planes de inversión
• Divisa - Edición EE. UU.: Dólares · España: Euros, IVA aparte
• Legal - Edición EE. UU.: Derechos de privacidad estatales de EE. UU. · España: RGPD, LOPDGDD, AEPD
• Estilo - Edición EE. UU.: Tinta bosque, papel hormigón, naranja topógrafo; Fraunces + Public Sans · España: Terracota y cobalto; Bricolage Grotesque + Figtree, esquinas redondeadas

Adaptación de marca

El mismo Cota, con acento local

La edición española es cálida y sociable: fondo crema, terracota para la interfaz, azul cobalto para las acciones y un marrón tostado para los paneles oscuros, con esquinas amplias. Bricolage Grotesque da a los titulares carácter y Figtree mantiene datos y formularios legibles. Todas las combinaciones cumplen WCAG AA. El logotipo con la retícula topográfica no cambia.

Portada y recorridos clave

La portada abre con infraestructuras españolas y la propuesta de Span para administraciones y constructoras. Las cifras y los casos pasan al Corredor A-2 y al Valle del Ebro. El selector de región cambia lugares, precios y organismos desde un único archivo de configuración sin salir del sistema de diseño común.

Cumplimiento, accesibilidad y confianza

• Política de privacidad conforme al RGPD y la LOPDGDD, con Cota Ibérica, S.L. como responsable y derecho de reclamación ante la AEPD.
• Aviso legal con CIF, domicilio social y datos registrales; banner de cookies con «Rechazar todo» igual de visible.
• Condiciones del software en euros bajo ley española; sin referencias a organismos estadounidenses.
• Supera las comprobaciones automáticas WCAG 2.2 AA en todas las páginas a 360, 390, 768 y 1440 px: sin fallos de contraste, sin controles inaccesibles y sin desplazamiento horizontal.
• Un selector de idioma generado a partir de hreflang aparece en la cabecera en escritorio y en el pie en móvil.

Un sistema, doce mercados

Cada texto visible vive en un archivo por mercado, y cada color y tipografía en un tema. Esta edición no necesitó plantillas ni componentes nuevos: textos, un tema, fotografía local y los textos legales la convirtieron en una experiencia de marca propia. Para una empresa de civic tech con planes internacionales, un nuevo mercado pasa a ser un proyecto de contenido, no un rediseño.

Entregables

• Perfil de mercado: idioma, formatos, normativa y estacionalidad
• Textos localizados para 8 plantillas, cabecera, pie y formularios
• Adaptación de marca: paleta, tipografías y descriptor del logotipo
• 37 fotografías locales (Pexels, fuentes en credits.json)
• Aviso legal y política de privacidad
• Accesibilidad (WCAG 2.2 AA, comprobación automática) y control de calidad en cuatro anchos de pantalla
• Medios para portfolio: capturas, páginas completas, vídeo de scroll, imagen OG, ficha de marca