Cómo construí un template médico premium con Astro 7 y glassmorphism

Llevo un tiempo queriendo publicar este proyecto y por fin está listo: Astro Medical Starter, un template open source para clínicas y centros médicos construido con Astro 7, Tailwind v4 y WordPress headless ready.

En este artículo cuento las decisiones técnicas y de diseño que tomé, los problemas que encontré y por qué hice las cosas como las hice. Si lo que quieres es descargarlo directamente, ve al proyecto en el Lab o al repositorio en GitHub.

Por qué un template para clínicas

El sector médico y de salud tiene unas necesidades muy específicas en web: schema.org de tipo MedicalClinic y MedicalProcedure, accesibilidad WCAG AA obligatoria, formularios sin backend que funcionen sin cookies innecesarias y un diseño que transmita confianza sin parecer un tema de WordPress de 2018.

La mayoría de templates que hay en el mercado para clínicas son o bien themes de WordPress con Elementor (lentos, dependientes de plugins) o bien plantillas de React que matan el SEO si no configuras bien el SSR. Astro resuelve ambos problemas de raíz: generación estática por defecto, cero JS innecesario, y total libertad de integración con cualquier CMS headless.

El diseño: inspirado en MYDNA

El sistema de diseño está inspirado en clínicas de medicina avanzada de alto valor percibido. Tipografía bold, fondo blanco, acento lila (#8b7cf6), glassmorphism en las tarjetas y animaciones suaves al scroll.

La fuente es DM Sans servida en local (woff2), sin dependencia de Google Fonts. El acento lila está centralizado en una sola variable CSS para que cambiar el color de marca sea cosa de un segundo:

/* global.css */
--color-accent:       #8b7cf6;   /* lila — cambia esto por tu color */
--color-accent-text:  #6d56e8;   /* versión WCAG AA para texto */

El glassmorphism lo apliqué con moderación: solo en las tarjetas de stats del About y en el badge del Hero. Demasiado glassmorphism en un sitio médico lo hace parecer una app de fitness, no una clínica seria.

Stack técnico

• Astro 7 — static output, sin JS por defecto
• Tailwind CSS v4 — via @tailwindcss/postcss
• DM Sans — fuente local, sin Google Fonts
• Vanilla JS — sin frameworks adicionales
• Web3Forms — formulario de contacto sin backend

Sin React, sin Vue, sin Next.js. Solo Astro con lo justo.

Schema.org médico: la parte que más tiempo me llevó

El schema es donde este template se diferencia de la mayoría. Incluye cuatro tipos diferentes correctamente implementados:

• MedicalClinic en BaseLayout.astro — entidad principal con nombre, dirección, teléfono, horarios y especialidades
• WebSite — para el Sitelinks Searchbox de Google
• BreadcrumbList — migas de pan en los resultados
• ItemList + MedicalProcedure en Services.astro — lista de servicios médicos estructurada

Lo más importante: review y aggregateRating no están en el tipo MedicalClinic porque Google no los acepta ahí. Ese error lo veo constantemente en auditorías de clínicas. Si los añades, GSC te devuelve un error de elemento no válido en el tipo y pierdes el rich snippet.

Todo el schema es configurable vía props en BaseLayout.astro sin tocar el JSON-LD:

<BaseLayout
  title="Clínica García — Madrid"
  schemaName="Clínica García"
  schemaPhone="+34 91 111 2222"
  schemaUrl="https://clinicagarcia.es"
>

WordPress headless opcional

Services.astro soporta dos modos: datos estáticos (por defecto) o WordPress headless. Para activar el modo WP basta con cambiar dos variables en el frontmatter:

const WP_MODE    = true;
const WP_API_URL = 'https://cms.tudominio.com/wp-json/wp/v2/servicio?per_page=6&_embed';

Si la API falla, el componente cae silenciosamente a los datos estáticos. Sin pantalla en blanco, sin errores de build. El mismo patrón se puede extender a Team.astro e History.astro.

Este es exactamente el mismo sistema que uso en proyectos como el starter kit WordPress headless, adaptado al sector médico.

Accesibilidad WCAG AA

Lista de lo que está implementado y verificado:

• Contraste WCAG AA en todos los textos (--color-muted: #6b6b7a sobre blanco = ratio 4.6:1)
• Áreas táctiles mínimas 44×44px en todos los botones e iconos
• Orden de headings correcto en todas las secciones
• aria-hidden="true" en todos los elementos decorativos
• alt descriptivo en todas las imágenes

El vídeo hero no tiene audio y tiene autoplay muted loop playsinline más un poster para los casos donde el vídeo no carga o el usuario prefiere movimiento reducido.

Formulario de contacto: cuatro opciones

Por defecto usa Web3Forms (gratis hasta 250 envíos/mes). Si necesitas otra cosa, el componente Contact.astro tiene comentarios para cambiar a Formspree, Netlify Forms, EmailJS o una API propia. El honeypot anti-spam (name="botcheck") funciona con Web3Forms y Formspree sin configuración adicional.

Deploy en hosting compartido (IONOS, SiteGround, etc.)

npm run build
# Sube /dist a tu public_html via FTP

El .htaccess incluido activa compresión gzip y caché del navegador automáticamente. El .env nunca llega al build de producción.

Lo que falta y lo que viene

El template es un punto de partida real, no un producto terminado para entregar a un cliente sin revisar. Lo que falta todavía:

• Demo en vivo (próximamente)
• Sitemap automático con @astrojs/sitemap
• Páginas internas: /servicios/[slug], /equipo/[slug]
• Versión EN con i18n de Astro
• Conexión WordPress para Team e History

Todo lo que falta sí está resuelto en los proyectos que entrego como servicio.

Descárgalo

El template está en GitHub bajo licencia MIT: libre para uso personal y comercial.

→ Ver el proyecto en el Lab de Daruma
→ Repositorio en GitHub

Si lo usas y le añades algo interesante, abre un PR. Y si necesitas un sitio médico a medida con todo esto ya resuelto más sitemap, SEO técnico y optimización de imágenes incluidos, hablamos.