Diseño y estilos

Tailwind CSS

Tailwind CSS 4 se integra con Vite mediante @tailwindcss/vite. src/main.css importa Tailwind, el tema y las fuentes. Las plantillas usan clases utilitarias; los componentes también emplean <style scoped> y @apply para reglas locales.

Tokens de marca

Las variables de src/styles/theme.css se conectan con Tailwind desde @theme inline en src/main.css.

Uso	Clases	Valor actual
Fondo de página	bg-bg-body	#fffdf5
Contenedor	bg-bg-container	#ffffff
Marca	bg-bg-brand, text-text-brand	#8b0000
Marca oscura	bg-bg-brand-darker	#610000
Acento	bg-bg-special	#556b2f
Texto principal	text-text-default	#1a1a1a
Texto secundario	text-text-muted	#5a403c
Error	bg-bg-error, text-text-error	#ffdad6, #93000a

El tema también define tokens para bordes, radios, otros estados y colores de texto.

Tipografía

• Playfair Display (font-display): títulos y acentos editoriales.
• Inter (font-body): texto funcional y lectura.

Las fuentes variables están en src/assets/fonts/ y se registran en src/styles/fonts.css.

Convenciones visuales

• Reutiliza tokens de tema para mantener consistencia; evita repetir hexadecimales para colores de marca.
• Diseña con variantes responsive Tailwind (sm:, md:, xl:).
• Conserva contraste legible y estados visibles de interacción, selección, carga y error.
• Cambios globales van en el tema; estilos específicos, scoped en el componente.