acfrioEn producción

El punto de partida

acfrio es un taller de Lavalleja 1279, Palermo, especializado en una sola cosa: aire acondicionado y calefacción para el automotor. Equipo propio de recuperación y carga de gas, cambios de evaporador con el tablero entero afuera, autos eléctricos entrando al taller. Veinte años de oficio muy específico.

El sitio que tenían era, literalmente, una tarjeta blanca sobre un degradé con el logo y tres botones: WhatsApp, Instagram y "dejanos tu reseña". Alrededor de 30 palabras en toda la página. Funcionaba como un linktree, no como el sitio de un negocio.

Debajo del capó estaba peor. La página cargaba Bootstrap y jQuery completos —unos 450 KB— sin usar prácticamente nada de eso, más los iconos y las fuentes por CDN. El único <h1> del sitio estaba escondido con font-size:0 dentro de un <header> con d-none, así que para Google la página no tenía título. El canonical apuntaba a acfrio.com.ar como URL relativa, que es inválida. La imagen de Open Graph medía 170×170 px, con lo cual cada vez que alguien compartía el link por WhatsApp aparecía un thumbnail diminuto.

Resumido: un taller con 20 años de conocimiento real no tenía ni una sola línea en su sitio que explicara qué hace, cómo trabaja o por qué conviene llevarle el auto en lugar de a un taller general.

El concepto: hoja de servicio técnica

La mayoría de los sitios de talleres se parecen entre sí: fondo oscuro, degradés, fotos de stock de un motor. Busqué algo que hablara del oficio y no de la categoría, y el punto de partida salió del propio logo de la marca: un auto dibujado con una línea que va del rojo al azul. Ese eje frío → calor es el negocio.

De ahí salió el sistema: una hoja de servicio técnica. Base papel off-white con una grilla de blueprint apenas visible, tinta azul marino, tipografía condensada industrial para los títulos y monoespaciada para etiquetas y datos. Nada decorativo: todo el sistema imita la lógica de una ficha de taller.

El motivo del eje térmico se repite en toda la página. El h1 pinta "Aire acondicionado" en azul y "calefacción" en rojo. La ficha del taller lleva un gauge de temperatura que va de frío a calor. En la lista de síntomas, cada ítem está tipificado como frío o calor según de qué lado del sistema viene la falla. Y cada sección arranca con un índice numerado — 01 a 07 — como los ítems de un presupuesto.

Las tipografías son Saira Condensed 700 para títulos, Archivo (variable, 100–900) para texto y IBM Plex Mono para etiquetas y datos. Las tres autoalojadas en woff2 con subset latin, y las dos que pintan el above-the-fold precargadas.

El contenido: hablar del síntoma, no de la empresa

La decisión de contenido más importante fue no escribir sobre acfrio. Nadie busca "empresa con 20 años de trayectoria": busca "el aire de mi auto no enfría". Todo el sitio se escribió desde el síntoma que tiene la persona y desde lo que el taller sabe explicar mejor que nadie.

De ahí salieron siete secciones, todas ancladas en la navegación: Servicios (los seis frentes del sistema), Diagnóstico ("Tu auto ya te está avisando" — ocho señales concretas), Cómo trabajamos (cuatro pasos, sin sorpresas), Trabajos (cuatro casos con fotos reales del taller), Alcance (tipos de vehículo y zonas), El taller (dirección, horarios, contacto, mapa) y Preguntas frecuentes.

Lo que hace que el texto funcione es que explica el porqué. "Cargar sin reparar es tirar el gas a la calle." "El paso del vacío es el que más se saltea y el que más caro sale." "Por qué para cambiar el evaporador sale todo el tablero." Es exactamente lo que el taller le explica al cliente en el mostrador, puesto por escrito. Ese material no lo genera una plantilla: salió de sentarse a preguntar cómo se hace cada trabajo.

La sección de Trabajos es la que más cambia la percepción. En lugar de fotos de stock, hay fotos reales: la estación de carga conectada a un auto, un tablero completamente desarmado en tres pasos, el frente de una camioneta abierto para llegar al condensador, un BYD eléctrico adentro del taller. Cada una con su explicación de qué implica el trabajo.

Decisiones técnicas

Cero dependencias. Se removieron Bootstrap y jQuery por completo — unos 450 KB que la página descargaba sin usar — junto con las fuentes y los iconos por CDN. El sitio quedó en HTML5 semántico, CSS propio con custom properties y JS vanilla. Sin build, sin node_modules, sin pipeline: se sube tal cual está al hosting. Para un cliente que no tiene equipo técnico, eso significa que cualquiera puede tocar el sitio dentro de tres años sin arqueología previa.

Iconos como sprite SVG inline. Los trece iconos del sitio viven en un bloque de <symbol> al inicio del <body> y se instancian con <use>. Reemplaza la hoja de iconos completa de Bootstrap Icons que se traía del CDN, y elimina un request bloqueante a un tercero.

Imágenes: 2.655 KB → 604 KB. Las fotos del taller se optimizaron a WebP con JPG de respaldo vía <picture>, con width/height declarados para que no haya salto de layout, loading="lazy" y decoding="async". Un 77% menos de peso sin perder la foto real.

Mapa sin terceros. En vez de un iframe de Google Maps —que arrastra scripts, cookies y bastante peso— se generó un mapa estático desde OpenStreetMap y se autoalojó. El usuario ve un mapa real de la cuadra con el pin del taller, y al tocarlo se abre Google Maps para las indicaciones y las reseñas. Se conserva el beneficio y se pierde el costo.

Progressive enhancement de verdad. Las animaciones de entrada usan data-reveal, pero solo ocultan contenido si el JS efectivamente arrancó: un script de una línea agrega la clase js al <html> y el CSS de reveal cuelga de esa clase. Si el JS falla, no queda un solo párrafo invisible. El JS vanilla resuelve el menú mobile, los reveals con IntersectionObserver, la sección activa en la navegación y el botón flotante de WhatsApp — y respeta prefers-reduced-motion.

Accesibilidad. Skip link, aria-labelledby en cada sección, aria-expanded en el toggle del menú con cierre por Escape, alt descriptivos en todas las fotos y jerarquía de headings correcta desde el h1.

SEO local, desde cero

Para un taller de barrio, la búsqueda local es el canal. El sitio anterior no tenía con qué competir: sin contenido, sin datos estructurados, sin sitemap, y con el h1 y el canonical rotos.

Datos estructurados. Se agregó un @graph de JSON-LD con AutoRepair + WebSite + WebPage: dirección postal, coordenadas, horarios por día, los seis servicios como makesOffer, el área de cobertura y una ReserveAction que apunta al WhatsApp de turnos. Hay dos contactPoint separados porque el taller opera así en la realidad: el fijo para llamadas y el WhatsApp para reservas.

Consistencia NAP. Los datos del taller viven en tres lugares que tienen que coincidir exactamente: el HTML visible, el JSON-LD y el perfil de Google Business. Quedó documentado en el README del repo, porque es el error clásico que aparece seis meses después cuando alguien actualiza un horario en un solo lado.

robots.txt con content signals. Además del sitemap, el robots.txt declara search=yes, ai-input=yes, ai-train=no: queremos que los buscadores con IA lean la página y citen al taller, pero eso no implica ceder el contenido para entrenamiento. Es una decisión chica que ya conviene tomar explícitamente.

Se corrigieron además el h1 (real y visible), el canonical (absoluto) y la imagen de Open Graph, que pasó de 170×170 a 1200×630 — el formato correcto para que el link se vea bien al compartirlo por WhatsApp, que es exactamente por donde llegan los clientes.

Qué me llevo

El trabajo más valioso de este proyecto no fue de diseño ni de código: fue escuchar cómo el taller explica su oficio y convertirlo en contenido. Un sitio de negocio local no se gana con animaciones; se gana con información que responda exactamente lo que la persona está buscando en Google a las once de la noche porque el auto no enfría.

La otra confirmación es que lo simple resiste mejor. Un sitio sin build, sin frameworks y sin CDN es un sitio que el cliente puede seguir manteniendo dentro de cinco años. En un proyecto donde nadie va a hacer npm install nunca más, eso vale más que cualquier stack moderno.

El cliente quedó muy conforme con el nuevo look and feel — y hoy tiene, por primera vez, un sitio que cuenta lo que realmente sabe hacer.