PARAFARMACIAHOY – Diseña una página web para un blog de afiliación de parafarmacia llamado **PARAFARMACIAHOY**, escrito por un técnico de farmacia. Es una web de contenido e información (comparativas, consejos, enlaces de afiliado), **no una tienda online**: no debe tener carrito, cuenta de usuario ni checkout. Cada producto enlaza a Amazon u otra tienda externa mediante enlace de afiliado. ## CONCEPTO DE MARCA La web debe transmitir cercanía, confianza y criterio profesional, alejándose de la imagen fría y clínica de una farmacia tradicional. Debe sentirse como una mezcla entre un blog de bienestar moderno y la recomendación honesta de alguien que trabaja detrás del mostrador y sabe de lo que habla. Evitar: diseño genérico de farmacia, exceso de verde clínico, banners agresivos, pop-ups, promesas médicas o de curación. ## ESTILO VISUAL **Paleta de color:** – Fondo base (crema): `#FBF9F3` – Fondo secundario (crema oscuro): `#F4F0E6` – Texto principal (casi negro): `#211F1A` – Texto secundario (gris cálido): `#57544B` – Verde salvia (confianza, secciones destacadas): `#7E9A81` – Verde salvia oscuro (botones, acentos fuertes): `#3F5A44` – Verde salvia pálido (fondos suaves): `#E7EEE4` – Coral (llamadas a la acción): `#F0875C` – Coral oscuro (hover/texto de acento): `#D96A3E` – Melocotón pálido (fondos de secciones cálidas): `#FCE9DC` **Tipografía:** – Titulares: **Instrument Serif** (serif fina y elegante, con cursiva para palabras de acento) – Cuerpo de texto: **Plus Jakarta Sans** – Etiquetas/eyebrows/metadatos: **Space Grotesk**, mayúsculas, letter-spacing amplio **Estilo general:** mucho espacio en blanco, esquinas muy redondeadas (18–28px de radio), tarjetas con sombra suave al hover, microanimaciones discretas (aparición progresiva al hacer scroll, tarjetas que flotan ligeramente, transiciones de opacidad). Nada recargado. ## ESTRUCTURA DE LA PÁGINA ### 1. Header Fijo arriba (sticky), fondo semitransparente con blur. Logo "Detrás del Mostrador" (con la palabra "Mostrador" en coral/cursiva). Menú: Categorías, Comparativas, Consejos, Sobre mí. Botón de suscripción en verde salvia oscuro a la derecha. Menú hamburguesa en móvil. ### 2. Hero Eyebrow: "Escrito por un técnico de farmacia". Título grande: "Recomendaciones de farmacia, sin humo." (con "farmacia, sin humo" en cursiva y color salvia). Subtítulo explicando el enfoque honesto y sin marketing. Dos botones: "Ver comparativas" (coral, relleno) y "Consejo de hoy" (outline). A la derecha, un bloque visual tipo fotografía editorial con 2 tarjetas flotantes pequeñas ("Recomendado hoy", "Favorito del mes") con animación de flotación suave. ### 3. Barra de confianza Franja verde oscuro con 4 datos en línea: nº de artículos revisados, formación profesional, coste 0€ para el lector, frecuencia de actualización. ### 4. Categorías ("¿Qué te trae por aquí hoy?") 4 tarjetas grandes con icono, título y descripción corta: Protección solar, Cuidado de la piel, Suplementos, Botiquín. Fondos alternos entre crema oscuro, salvia pálido y melocotón pálido. Elevación suave al hover. ### 5. Consejo del día (sección diferencial — la más importante de la web) Fondo verde salvia oscuro con un círculo degradado coral de fondo (decorativo). Título: "Tu consejo de hoy 💚". Tarjeta blanca centrada con una etiqueta "HOY", un texto de consejo en serif grande, minutos de lectura y enlace "Leer el artículo completo →". Debajo, un botón "Dame otro consejo" que, al pulsarlo, cambia el texto del consejo con una transición de fundido (fade out/in), rotando entre 4–5 consejos distintos. Cierra con el texto "Vuelve mañana. Tendrás otro." ### 6. Comparativas y guías Grid tipo revista: una tarjeta grande a la izquierda (artículo destacado, con imagen más grande) y 4 tarjetas más pequeñas a la derecha en 2 columnas. Cada tarjeta tiene categoría (etiqueta en coral), título en serif, y enlace "Leer →". ### 7. Recomendaciones de afiliado ("Lo que yo tendría en casa") Grid de 2×2 tarjetas horizontales: imagen pequeña + nombre del producto + una frase humana de por qué se recomienda + botón "Ver precio →" en coral que enlaza a la tienda externa. Aclarar en el copy que son enlaces de afiliado sin coste extra para el lector. ### 8. Descubre algo nuevo Feed de tarjetas en scroll horizontal (como Pinterest), con contenido más ligero tipo "3 cosas que llevaría siempre en mi neceser", mezclando fotografía editorial, consejos y productos relacionados. ### 9. Newsletter Sección con fondo melocotón pálido, esquinas muy redondeadas, centrada. Título "Tu dosis semanal 💌", campo de email y botón "Quiero recibirla ✨". Aclaración de que no hay spam y se pueden dar de baja cuando quieran. ### 10. Sobre mí Franja con avatar circular, nombre/rol (técnico de farmacia) y una breve bio que explique el enfoque del blog y una nota aclarando que el contenido es informativo y no sustituye la consulta con un profesional sanitario. ### 11. Footer Fondo casi negro (`#211F1A`). 4 columnas: descripción de marca, categorías, sobre el blog (quién escribe, contacto, política de afiliación), legal (aviso legal, privacidad, cookies). Al final, una línea con el aviso legal obligatorio de participación en programas de afiliación (Amazon y otros). ## INTERACCIÓN Y ANIMACIONES – Aparición progresiva (fade + slide up) de cada sección al hacer scroll – Hover con elevación suave (translateY + sombra) en tarjetas de categorías, artículos y recomendaciones – Botón "Dame otro consejo" con transición de fundido al cambiar el texto – Subrayado animado en los enlaces del menú al pasar el ratón – Diseño totalmente responsive, con especial cuidado en la versión móvil (menú hamburguesa, grids que pasan a 1–2 columnas) ## NOTAS TÉCNICAS – Construir con **WordPress + tema Astra + Elementor** (sin necesidad de código), o como HTML/CSS/JS si se entrega en código. – Sin carrito, sin login, sin checkout: todos los CTA de producto son enlaces externos de afiliado. – Debe incluir aviso legal de afiliación visible en el footer, obligatorio por normativa de consumo.