gloria_app/site_requirements.md

🎨 Site Requirements & Style Guide – Gloria App

Este documento define los requisitos visuales, de diseño y técnicos para la interfaz de usuario de Gloria App, asegurando una estética premium, cálida y profesional ("High-End Wellness") para la terapeuta Gloria Niño.

---

1. Identidad Visual

🎨 Paleta de Colores

Colores definidos para transmitir elegancia, serenidad y sanación.

Token	Color Hex	Descripción	Uso Principal
Primary	#340649	Deep Royal Purple	Encabezados, textos principales, fondos oscuros de alto contraste.
Secondary (Gradient)	#67486A	Muted Lavender/Purple	Gradientes, transparencias, bordes sutiles, estados desactivados.
Background	#F9F6E9	Soft Cream	Fondo general de la página, tarjetas (light mode).
Accent	#C8A668	Muted Gold	Detalles de lujo, iconos, líneas separadoras, estados de éxito.
Button Primary	#C8A668	Muted Gold	Botones de llamada a la acción (CTA) principales.
Button Secondary	#67486A	Muted Lavender	Botones secundarios, filtros, o acciones de menor jerarquía.

🖋️ Tipografía (Sugerencia Premium)

Se recomienda una combinación de Serif para títulos (elegancia) y Sans-Serif para cuerpo (legibilidad).

• Títulos (Display): Playfair Display o Cormorant Garamond
  • Uso: h1, h2, Citas en testimonios.
  • Peso: 700 (Bold) para impacto, 400 (Regular) para subtítulos elegantes.
• Cuerpo (Body): Fira Code (Elección actual del mockup) o Inter.
  • Uso: Párrafos, menús, formularios.
  • Peso: 400 (Regular), 300 (Light) para descripciones, 500 (Medium) para botones.

---

2. Requisitos de Diseño UI/UX

📐 Layout & Espaciado

• Enfoque "Phone-First": El diseño debe priorizar la experiencia móvil, con elementos táctiles grandes y legibles.
• Whitespace: Uso generoso del espacio en blanco (o cream space) para separar secciones y dar aire al contenido (Wabi-sabi aesthetics).
• Contenedor: Ancho máximo de 1200px para desktop, con márgenes laterales de 24px en móvil.

🖼️ Estilos de Componentes

1. Botones (Buttons)

• Primary CTA (Gold):
  • Fondo: #C8A668
  • Texto: #FFFFFF (o #340649 si se requiere mayor contraste, verificar accesibilidad). Se sugiere Blanco para elegancia.
  • Radio: 50px (Pill shape) o 8px (Rounded).
  • Hover: Aclarar ligeramente o añadir sombra suave (box-shadow: 0 4px 12px rgba(200, 166, 104, 0.4)).
• Secondary (Purple):
  • Fondo: #67486A
  • Texto: #FFFFFF
  • Hover: Oscurecer a #553C57.

2. Tarjetas (Cards) - Servicios/Testimonios

• Glassmorphism (Opcional):
  • Fondo: rgba(255, 255, 255, 0.7) sobre fondos con textura o gradientes suaves del color #67486A.
  • Borde: 1px solid rgba(103, 72, 106, 0.1).
  • Sombra: 0 8px 32px rgba(52, 6, 73, 0.05).
• Estilo Sólido:
  • Fondo: #FFFFFF sobre el fondo #F9F6E9.
  • Borde superior: Línea acento #C8A668 de 4px.

3. Hero Section

• Diseño: Imagen de Gloria o textura abstracta de sanación a la derecha/fondo. Texto a la izquierda (Desktop) o centrado (Móvil).
• Overlay: Gradiente lineal suave de #340649 (transparencia baja) a transparente si la imagen tiene texto encima.

4. Tipografía y Detalles

• Micro-interacciones: Los enlaces y botones deben tener transiciones suaves (0.3s ease).
• Iconografía: Líneas finas (outline icons) en color #340649 o #C8A668.

---

3. Estructura de Secciones (Mapa del Sitio)

Header (Navegación)

• Fondo: Transparente (fijo al scrollear se vuelve #F9F6E9 o #340649).
• Logo: SVG de firma "Gloria Niño" o Logo Gráfico.
• Items: Inicio, Sobre mí, Servicios, Testimonios, Contacto.
• CTA: Botón pequeño "Agendar".

Hero

• h1: "Gloria Niño - Terapeuta Emocional".
• h2/Subtítulo: "Sanación Integral" y descripción de enfoque.
• Botones: CTA Principal (Gold) + "Ver Servicios" (Transparent/Hover fill).

Servicios (Grid)

• Grid de 3 columnas (1 col en móvil).
• Cada servicio con Icono/Imagen minimalista, Título y breve descripción.

Testimonios

• Carrusel. Fondo #340649 (Invertido) o Mantener Cream #F9F6E9 con tarjetas blancas.
• Si fondo es oscuro, texto #F9F6E9 y Acento #C8A668.

Footer

• Fondo: #340649 (Primary Deep Purple).
• Texto: #F9F6E9.
• Enlaces legales discretos.

---

4. Requisitos Aplicación Web (Sistema de Citas)

El diseño visual debe mantenerse consistente en las vistas funcionales de la aplicación (Next.js):

4.1 Flujo de Agendamiento

• Login (Phone-First):
  • Input de teléfono grande y central (Estilo tipo "Typeform").
  • Teclado numérico optimizado en móvil.
  • Verificación OTP clean y minimalista.
• Triaje de Crisis:
  • Pantalla de alerta suave (No rojo alarmante, sino tono serio/calmado).
  • Botones de decisión claros ("Sí", "No").
• Selección de Fecha (Calendario):
  • Estilo personalizado de calendario (no el default del navegador).
  • Días disponibles en #340649 o fondo #C8A668 (circular) si seleccionado.
  • Horarios en pills/chips seleccionables.

4.2 Dashboards (Privado)

Dashboard Terapeuta (Gloria)

• Vista de Agenda: Calendario semanal con bloques de tiempo.
• Expediente Paciente:
  • Layout de "Hoja Clínica" limpia.
  • Área de texto enriquecido para notas.
  • Grabadora de voz integrada (Botón flotante de micrófono).
• Modo Enfoque: Posibilidad de ocultar menús laterales para escribir notas sin distracciones.

Dashboard Asistente

• Confirmación de Pagos: Lista eficiente con acciones rápidas (Aprobar/Rechazar).
• Gestión de Agenda: Vista de calendario (Read/Write) pero sin acceso a notas clínicas.

---

5. Requisitos Técnicos CSS

• Usar Variables CSS (:root) para todos los colores y fuentes.
• Diseño Responsivo (Media Queries estándar).
• Animaciones: Fade-in al hacer scroll (AOS o Framer Motion si es React/Next).