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).