Preparación Semana 1 — elementos corporativos propuestos: paleta de color y sistema de diseño.
Paleta de color 2026
Construida a partir de los 4 roles de color que define el PDF de estrategia (pág. 16): verde oliva, tonos tierra, blanco/negro/grises y dorado/mostaza. El PDF define el criterio; los hex concretos son la propuesta de esta etapa, a validar en la presentación de línea gráfica (día 4).
Tonos Tierra — secundario (calidez / cercanía / vida real)
#7A4E2E
Tierra 700
Texto cálido, bordes fuertes
#B07A4C
Tierra 500
Terracota — segundo acento
#D9C3A0
Tierra 300
Arena — separadores, cards
#F3E9DA
Tierra 100
Fondo cálido alterno
Dorado / Mostaza — acento (destaca acciones, sin romper la estética)
#C1902A
Dorado 600
Hover de botones/CTA
#D4A72E
Dorado 500
CTA principal ("Escríbele a Carlos")
#E8CD7E
Dorado 300
Badges, destacados suaves, botón activo
Regla de uso: el dorado es exclusivo para llamados a la acción (agendar visita, WhatsApp, financiamiento) — nunca como color decorativo de fondo grande. Sobre dorado, el texto siempre va en Ink #24221D, nunca blanco.
Complementa la paleta de color: define cómo se aplican tipografía, jerarquía de títulos y tratamiento de imágenes en la nueva web. Se completa en una etapa posterior — por ahora queda esbozado con lo que ya propone la estrategia y marcado como pendiente lo que falta cerrar.
Tipografía y jerarquía de títulos/textos
Título hero — portada / banner principal
Santa Luisa de Palpi
Más espacio para tu vida.
Serif editorial en mayúscula (propuesta: Lora 500), igual a como aparece en el mockup de la estrategia y consistente con la línea gráfica que ya usan en Instagram. Se reserva solo para el titular principal de cada hero/portada — nunca para textos de uso frecuente.
Título de contenido — secciones, tarjetas, formularios
Aquí ya hay vida. Suma la tuya.
Montserrat en mayúscula con tracking, igual que en el mockup ("AQUÍ YA HAY VIDA", menú de navegación). Se usa en todo el resto de la jerarquía visible: H2, kicker y etiquetas/CTA. El cuerpo de texto (400/500) y los subtítulos H3 se mantienen en minúscula normal, como en los bloques de contenido de la maqueta (ej. "Financiamiento claro y real").
Vista previa con Google Fonts (Lora + Montserrat) cargadas vía CDN; en el sitio real se cargan las mismas familias vía WordPress.
Uso
Familia / peso
Tamaño ref. (desktop / móvil)
Título hero (H1 de portada)
Lora 500, mayúsculas
40–48px / 28–32px
Kicker sobre el hero
Montserrat 700, mayúsculas, tracking amplio
12–13px
Título de sección (H2)
Montserrat 700, mayúsculas, tracking
24–28px / 20px
Subtítulo (H3)
Montserrat 600, minúscula normal
16–18px
Cuerpo de texto
Montserrat 400/500, minúscula normal
14–15px
Etiquetas / botones (CTA)
Montserrat 700, mayúsculas, tracking amplio
11–12px
Propuesta — a confirmar con el cliente
Jerarquía combinada Lora + Montserrat, con mayúsculas en hero y títulos de sección — el uso de mayúsculas no es una elección nuestra: replica el estilo que ya usan en el mockup de la estrategia y en sus posts de Instagram, para mantener la misma línea visual del proyecto. Reservamos la serif (Lora) solo para el titular hero, y Montserrat en mayúscula con tracking para títulos de sección, kicker y etiquetas — el resto (subtítulos, cuerpo de texto) queda en minúscula normal para no saturar la lectura.
Lo que sí queda a definir/ajustar con el cliente son los tamaños y espaciados exactos de esta escala — si comparten más ejemplos de sus posts o del mockup en mayor resolución, afinamos antes de cerrarla.
Tratamiento de las imágenes
Propuesta — a confirmar con el cliente
Radios de esquina — proponemos sin radio (0px) para fotos/banners a página completa (full-bleed, como el hero de estos mismos documentos) y un radio de 14px para imágenes dentro de tarjetas, thumbnails y bloques de contenido, en línea con el resto de la interfaz (tarjetas a 18px, swatches a 10px).
Sin radio — fotos/banners full-bleedRadio 14px — imágenes de contenido/tarjetas
Propuesta — a confirmar con el cliente
Overlay para desplegar contenido sobre foto/video — un degradado oscuro (transparente → negro ~68% opacidad) en la base de la imagen o del loop animado, para que el título y el texto se lean con buen contraste sin oscurecer toda la escena.
Santa Luisa de Palpi
Más espacio para tu vida.
Pendiente de definir
Proporciones estándar por tipo de imagen (thumbnails, tarjetas, galería) y filtros de color/tono sobre las fotos del proyecto.
Banners animados — foto estática con animación local
Propuesta — a confirmar con el cliente
Cinemagraph en dos archivos: fondo fijo + capa de personajes con canal alfa — la idea es que el banner arranque como una foto y una parte puntual de la escena cobre vida (los personajes se miran, un gesto como el papá pasándole la mano por la cabeza a la niña), mientras el paisaje se mantiene completamente estático. La animación de los personajes se exporta como archivo separado con canal alfa (transparente), no quemada sobre el fondo — se superponen ambas capas por CSS.
Escena base — foto fija de alta calidad (real o generada con IA de imagen, ej. Nano Banana) del paisaje wide/panorámico con las personas en la pose de partida, igual a la proporción de la maqueta.
Animación local con alfa — se anima solo la porción de los personajes (herramienta de video con máscara de movimiento o edición cuadro a cuadro) y se exporta esa capa por separado, con fondo transparente — no como un solo archivo compuesto sobre el paisaje.
Superposición por CSS — la foto de fondo y la capa de personajes se posicionan como dos elementos independientes, cada uno con sus propias reglas de tamaño/posición por breakpoint.
Beneficio responsive — en mobile, si se mantiene la proporción wide de la foto de fondo, los personajes quedarían diminutos o cortados dentro de ese recorte. Al tener la capa de personajes separada, se puede reposicionar y escalar de forma independiente para que sigan siendo protagonistas del banner en cualquier ancho de pantalla, sin depender del recorte que le toque a la foto panorámica.
Exportación — loop corto (2–4 s): fondo como foto fija o WebP simple, capa de personajes como WebP animado con canal alfa (más liviano que MP4/GIF con alfa; a validar soporte en los navegadores/dispositivos objetivo, con fallback a foto estática si no hay compatibilidad).
Proponemos probar primero esta técnica sobre la muestra ya compartida antes de definir en qué banners del sitio se aplicaría (portada, hero de El Proyecto, etc.) versus dejar foto estática simple.
