ajuste de docu

PRD.md

@@ -8,7 +8,7 @@
 
 ## 1. Visión del Producto
 
-Transformar la presencia digital de Gloria Wells en una herramienta operativa que centralice la atención, gestione crisis y automatice el agendamiento, manteniendo una estética de alta gama, calidez y profesionalismo.
+Transformar la presencia digital de Gloria Niño en una herramienta operativa que centralice la atención, gestione crisis y automatice el agendamiento, manteniendo una estética de alta gama, calidez y profesionalismo.
 
 ---
 
@@ -24,15 +24,16 @@ Transformar la presencia digital de Gloria Wells en una herramienta operativa qu
 
 #### Hero Section
 
-* Imagen: Fotografía profesional de Gloria
-* Titular: **Sanación Integral**
-* Subtitular: Enfoque terapéutico
+* Imagen: Fotografía profesional de Gloria Niño
+* Titular: **Gloria Niño - Terapeuta Emocional**
+* Subtitular: Enfoque terapéutico personalizado
 * Botón principal: **Agenda tu Cita** (Inicia flujo)
+* Botón secundario: **Ver Servicios**
 
 #### Sección Biográfica
 
-* Video: Introducción
-* Texto: Conoce a Gloria
+* Imagen: Gloria Niño en sesión (jardín zen)
+* Texto: Biografía breve enfocada en duelo y ansiedad
 
 #### Servicios (Grid 3)
 
@@ -46,7 +47,8 @@ Transformar la presencia digital de Gloria Wells en una herramienta operativa qu
 
 #### Contacto
 
-* Nombre, Email, Mensaje
+* Formulario: Nombre, WhatsApp, Mensaje
+* Tarjetas: Ubicación y Horarios
 
 #### Footer
 

README.md

@@ -6,7 +6,18 @@ Sistema modular de alta gama para la gestión de pacientes, triaje de crisis y a
 
 ## 📖 Descripción General
 
-**Gloria** es una solución digital diseñada para la terapeuta Gloria Wells. El sistema optimiza la interacción entre la terapeuta, su asistente y los pacientes mediante un enfoque *phone-first* (identificación vía WhatsApp) y una estética visual premium inspirada en el bienestar y la sanación integral.
+**Gloria** es una solución digital diseñada para la terapeuta Gloria Niño. El sistema optimiza la interacción entre la terapeuta, su asistente y los pacientes mediante un enfoque *phone-first* (identificación vía WhatsApp) y una estética visual premium inspirada en el bienestar y la sanación integral.
+
+---
+
+## 🎨 Referencia Visual (Mockup)
+
+> **Importante:** Se ha creado un prototipo visual de alta fidelidad en la carpeta `mockup/`.
+> Este prototipo (`index.html` + `styles.css`) debe utilizarse como **referencia estricta de diseño** (colores, tipografía, espaciado, animaciones) para la implementación en Next.js.
+> La carpeta `mockup/` incluye una copia local de los assets en `mockup/src/` para ser totalmente autónoma.
+
+### Nota para Desarrollo
+El código de producción se implementará en **Next.js** dentro de la carpeta `src/`. El mockup es un artefacto separado para aprobación de diseño.
 
 ---
 
@@ -52,6 +63,9 @@ El proyecto sigue una arquitectura de **Monolito Modular**, manteniendo simplici
 ## 📂 Estructura de Carpetas
 
 ```bash
+├── mockup            # ⚠️ HTML/CSS de referencia visual (NO usar en producción)
+│   ├── index.html    # Prototipo estático del sitio
+│   └── styles.css    # Estilos de referencia
 ├── src
 │   ├── app               # Rutas, Layouts y Server Components
 │   │   ├── (auth)        # Flujo de identificación por teléfono
@@ -66,6 +80,8 @@ El proyecto sigue una arquitectura de **Monolito Modular**, manteniendo simplici
 └── scripts               # Tareas programadas
 ```
 
+> **Nota:** La carpeta `mockup/` contiene únicamente prototipos HTML/CSS estáticos para referencia visual durante el desarrollo. El código de producción se implementará en Next.js dentro de `src/`.
+
 ---
 
 ## 🛠 Instalación y Configuración
@@ -173,7 +189,7 @@ Características:
 
 Desarrollado para el proyecto:
 
-**Sanación Integral – Gloria Wells**
+**Sanación Integral – Gloria Niño**
 
 Uso interno y confidencial.
 

TASKS.md

@@ -4,6 +4,14 @@ Este documento define el plan de ejecución por sprints, controles de seguridad
 
 ---
 
+## 🎨 Referencia Visual (Mockup)
+
+> **Importante:** Se ha creado un prototipo visual de alta fidelidad en la carpeta `mockup/`.
+> Este prototipo (`index.html` + `styles.css`) debe utilizarse como **referencia estricta de diseño** (colores, tipografía, espaciado, animaciones) para la implementación en Next.js.
+> NO copiar y pegar el código HTML directamente; implementar usando componentes React y Tailwind/CSS Modules según la arquitectura del proyecto.
+
+---
+
 ## 🟢 Sprint 1 – Cimientos, Infraestructura y Seguridad Base
 
 ### Foco

mockup/index.html

@@ -0,0 +1,381 @@
+<!doctype html>
+<html lang="es">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/png" href="./src/logo.png" />
+    <title>Gloria Niño - Sanación Integral</title>
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Fira+Code:wght@300;400;500;600&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <!-- Header -->
+    <header class="header">
+      <div class="container header-inner">
+        <a href="#" class="logo">
+          <img src="./src/logo.svg" alt="Gloria Niño" style="height: 50px; width: auto;">
+        </a>
+        
+        <!-- Hamburger Menu Button -->
+        <button class="menu-toggle" id="menuToggle" aria-label="Abrir menú">
+          <span></span>
+          <span></span>
+          <span></span>
+        </button>
+        
+        <nav class="nav" id="navMenu">
+          <ul>
+            <li><a href="#inicio">Inicio</a></li>
+            <li><a href="#sobre-mi">Sobre mí</a></li>
+            <li><a href="#servicios">Servicios</a></li>
+            <li><a href="#testimonios">Testimonios</a></li>
+            <li><a href="#contacto">Contacto</a></li>
+          </ul>
+        </nav>
+        <a
+          href="#agendar"
+          class="btn btn-primary header-cta"
+          style="padding: 0.5rem 1.5rem; font-size: 0.9rem"
+          >Agendar</a
+        >
+      </div>
+    </header>
+    
+    <script>
+      // Mobile Menu Toggle
+      const menuToggle = document.getElementById('menuToggle');
+      const navMenu = document.getElementById('navMenu');
+      
+      menuToggle.addEventListener('click', () => {
+        menuToggle.classList.toggle('active');
+        navMenu.classList.toggle('active');
+      });
+      
+      // Close menu when clicking a link
+      document.querySelectorAll('.nav a').forEach(link => {
+        link.addEventListener('click', () => {
+          menuToggle.classList.remove('active');
+          navMenu.classList.remove('active');
+        });
+      });
+
+      // Scroll Animation Observer
+      const observerOptions = {
+        root: null,
+        rootMargin: '0px',
+        threshold: 0.1
+      };
+
+      const observer = new IntersectionObserver((entries, observer) => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            entry.target.classList.add('visible');
+          }
+        });
+      }, observerOptions);
+
+      document.addEventListener('DOMContentLoaded', () => {
+        // Fade In Animation
+        const sections = document.querySelectorAll('.fade-in');
+        sections.forEach(section => {
+          observer.observe(section);
+        });
+
+        // Carousel Logic
+        const track = document.querySelector('.carousel-track');
+        const slides = Array.from(track.children);
+        const nextButton = document.querySelector('.carousel-btn.next');
+        const prevButton = document.querySelector('.carousel-btn.prev');
+        const dotsNav = document.querySelector('.carousel-nav');
+        const dots = Array.from(dotsNav.children);
+
+        const slideWidth = slides[0].getBoundingClientRect().width;
+
+        // Arrange the slides next to one another
+        const setSlidePosition = (slide, index) => {
+          slide.style.left = slideWidth * index + 'px';
+        };
+        slides.forEach(setSlidePosition);
+
+        const moveToSlide = (track, currentSlide, targetSlide) => {
+          track.style.transform = 'translateX(-' + targetSlide.style.left + ')';
+          currentSlide.classList.remove('current-slide');
+          targetSlide.classList.add('current-slide');
+        }
+
+        const updateDots = (currentDot, targetDot) => {
+          currentDot.classList.remove('current-slide');
+          targetDot.classList.add('current-slide');
+        }
+
+        // Click Left
+        prevButton.addEventListener('click', e => {
+          const currentSlide = track.querySelector('.current-slide');
+          const prevSlide = currentSlide.previousElementSibling;
+          const currentDot = dotsNav.querySelector('.current-slide');
+          const prevDot = currentDot.previousElementSibling;
+
+          if (prevSlide) {
+            moveToSlide(track, currentSlide, prevSlide);
+            updateDots(currentDot, prevDot);
+          }
+        });
+
+        // Click Right
+        nextButton.addEventListener('click', e => {
+          const currentSlide = track.querySelector('.current-slide');
+          const nextSlide = currentSlide.nextElementSibling;
+          const currentDot = dotsNav.querySelector('.current-slide');
+          const nextDot = currentDot.nextElementSibling;
+
+          if (nextSlide) {
+            moveToSlide(track, currentSlide, nextSlide);
+            updateDots(currentDot, nextDot);
+          }
+        });
+
+        // Click Nav Indicators
+        dotsNav.addEventListener('click', e => {
+          const targetDot = e.target.closest('button');
+
+          if (!targetDot) return;
+
+          const currentSlide = track.querySelector('.current-slide');
+          const currentDot = dotsNav.querySelector('.current-slide');
+          const targetIndex = dots.findIndex(dot => dot === targetDot);
+          const targetSlide = slides[targetIndex];
+
+          moveToSlide(track, currentSlide, targetSlide);
+          updateDots(currentDot, targetDot);
+        });
+        
+        // Auto Rotate
+        setInterval(() => {
+          const currentSlide = track.querySelector('.current-slide');
+          const nextSlide = currentSlide.nextElementSibling || slides[0];
+          const currentDot = dotsNav.querySelector('.current-slide');
+          const nextDot = currentDot.nextElementSibling || dots[0];
+          
+          moveToSlide(track, currentSlide, nextSlide);
+          updateDots(currentDot, nextDot);
+        }, 5000);
+      });
+    </script>
+
+    <!-- Hero Section -->
+    <section class="hero" id="inicio">
+      <div class="container hero-grid">
+        <div class="hero-content">
+          <h1>Gloria Niño<br><span style="font-size: 0.6em; font-weight: 400; display: block; margin-top: 0.2rem;">Terapeuta Emocional</span></h1>
+          <p>
+            Te acompaño a sanar tus heridas emocionales y transformar tu vida a través de un proceso terapéutico profundo, cálido y profesional.
+          </p>
+          <div class="hero-actions">
+            <a href="#agendar" class="btn btn-primary">Agenda tu Cita</a>
+            <a href="#servicios" class="btn btn-secondary">Ver Servicios</a>
+          </div>
+        </div>
+        <div class="hero-image">
+          <img
+            src="./src/gloria.png"
+            alt="Gloria Niño - Terapeuta Emocional"
+          />
+        </div>
+      </div>
+    </section>
+
+    <!-- Sobre Mí (Breve) -->
+    <section class="section-about fade-in" id="sobre-mi">
+      <div class="container">
+        <div class="section-title">
+          <h2>Sobre Mí</h2>
+        </div>
+        <div class="about-content">
+          <div class="about-image">
+            <img 
+              src="./src/gloria_2.png" 
+              alt="Gloria Niño en sesión"
+            >
+          </div>
+          <div class="about-text">
+            <p>
+              Soy Gloria Niño, terapeuta emocional con amplia experiencia en el acompañamiento de procesos de duelo, ansiedad y crecimiento personal. Creo firmemente que la sanación comienza cuando nos permitimos sentir y validar nuestras emociones en un espacio seguro.
+            </p>
+            <div class="about-actions">
+              <a href="#servicios" class="btn btn-primary">Ver Servicios</a>
+              <a href="#contacto" class="btn btn-secondary">Contactar</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Services -->
+    <section class="section-services fade-in" id="servicios">
+      <div class="container">
+        <div class="section-title">
+          <h2>Mis Servicios</h2>
+          <p>Enfoques adaptados a tus necesidades actuales.</p>
+        </div>
+        <div class="services-grid">
+          <!-- Service 1 -->
+          <div class="service-card">
+            <img src="./src/services/icons/t_ind.png" alt="Terapia Individual" style="width: 80px; height: 80px; margin-bottom: 1.5rem;">
+            <h3>Terapia Individual</h3>
+            <p>
+              Sesiones uno a uno enfocadas en ansiedad, depresión, trauma o
+              crecimiento personal.
+            </p>
+          </div>
+          <!-- Service 2 -->
+          <div class="service-card">
+            <img src="./src/services/icons/t_pareja.png" alt="Terapia de Pareja" style="width: 80px; height: 80px; margin-bottom: 1.5rem;">
+            <h3>Terapia de Pareja</h3>
+            <p>
+              Espacios para mejorar la comunicación, resolver conflictos y
+              reconectar.
+            </p>
+          </div>
+          <!-- Service 3 -->
+          <div class="service-card">
+            <img src="./src/services/icons/t_fam.png" alt="Talleres y Grupos" style="width: 80px; height: 80px; margin-bottom: 1.5rem;">
+            <h3>Talleres y Grupos</h3>
+            <p>Experiencias colectivas de sanación y aprendizaje emocional.</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Testimonials -->
+    <section class="section-testimonials fade-in" id="testimonios">
+      <div class="container">
+        <div class="section-title">
+          <h2>Lo que dicen mis pacientes</h2>
+        </div>
+        
+        <div class="carousel-container">
+          <button class="carousel-btn prev" aria-label="Anterior">&#10094;</button>
+          
+          <div class="carousel-track-container">
+            <ul class="carousel-track">
+              <!-- Testimonio 1 -->
+              <li class="carousel-slide current-slide">
+                <div class="testimonial-card">
+                  <p class="testimonial-quote">
+                    "Gloria me ayudó a encontrar claridad en un momento muy difícil de mi vida. Su calidez y profesionalismo son inigualables. Me sentí escuchada y comprendida desde la primera sesión."
+                  </p>
+                  <p class="testimonial-author">— María G.</p>
+                </div>
+              </li>
+              
+              <!-- Testimonio 2 -->
+              <li class="carousel-slide">
+                <div class="testimonial-card">
+                  <p class="testimonial-quote">
+                    "Gracias a la terapia con Gloria pude sanar heridas de mi infancia que afectaban mis relaciones actuales. Es una terapeuta excepcionalmente empática."
+                  </p>
+                  <p class="testimonial-author">— Carlos R.</p>
+                </div>
+              </li>
+              
+              <!-- Testimonio 3 -->
+              <li class="carousel-slide">
+                <div class="testimonial-card">
+                  <p class="testimonial-quote">
+                    "El enfoque integral que utiliza es muy efectivo. No solo hablamos, sino que me dio herramientas prácticas para manejar mi ansiedad en el día a día."
+                  </p>
+                  <p class="testimonial-author">— Ana Sofía L.</p>
+                </div>
+              </li>
+            </ul>
+          </div>
+          
+          <button class="carousel-btn next" aria-label="Siguiente">&#10095;</button>
+        </div>
+        
+        <div class="carousel-nav">
+          <button class="carousel-indicator current-slide"></button>
+          <button class="carousel-indicator"></button>
+          <button class="carousel-indicator"></button>
+        </div>
+      </div>
+    </section>
+
+    <!-- Contact Form Section -->
+    <section class="section-contact fade-in" id="contacto-form" style="background-color: white;">
+      <div class="container">
+        <div class="section-title">
+          <h2>Contáctame</h2>
+          <p>¿Tienes alguna duda? Escríbeme y te responderé lo antes posible.</p>
+        </div>
+        
+        <div class="contact-form-container">
+           <form class="contact-form" onsubmit="event.preventDefault(); alert('Mensaje enviado (simulado)');">
+             <div class="form-group">
+               <label for="name">Nombre</label>
+               <input type="text" id="name" name="name" placeholder="Tu nombre" required>
+             </div>
+             <div class="form-group">
+               <label for="phone">Teléfono / WhatsApp</label>
+               <input type="tel" id="phone" name="phone" placeholder="Tu número de contacto" required>
+             </div>
+             <div class="form-group">
+               <label for="message">Mensaje</label>
+               <textarea id="message" name="message" rows="4" placeholder="¿En qué puedo ayudarte?" required></textarea>
+             </div>
+             <button type="submit" class="btn btn-primary" style="width: 100%;">Enviar Mensaje</button>
+           </form>
+           
+           <div class="contact-info-cards">
+             <div class="info-card">
+               <h3>Ubicación</h3>
+               <p>Consultorio Virtual & Presencial<br>Ciudad de México</p>
+             </div>
+             <div class="info-card">
+               <h3>Horarios</h3>
+               <p>Lunes a Viernes<br>9:00 AM - 7:00 PM</p>
+             </div>
+           </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="footer" id="contacto">
+      <div class="container">
+        <div class="footer-grid">
+          <div class="footer-col">
+            <h4>Gloria Niño</h4>
+            <p>Terapeuta Emocional.</p>
+          </div>
+          <div class="footer-col">
+            <h4>Enlaces</h4>
+            <ul>
+              <li><a href="#inicio">Inicio</a></li>
+              <li><a href="#servicios">Servicios</a></li>
+              <li><a href="#privacidad">Política de Privacidad</a></li>
+            </ul>
+          </div>
+          <div class="footer-col">
+            <h4>Contacto</h4>
+            <ul>
+              <li>
+                <a href="mailto:contacto@glorianino.com">contacto@glorianino.com</a>
+              </li>
+              <li><a href="tel:+525512345678">+52 55 1234 5678</a></li>
+            </ul>
+          </div>
+        </div>
+        <div class="footer-bottom">
+          <p>&copy; 2026 Gloria App. Todos los derechos reservados.</p>
+        </div>
+      </div>
+    </footer>
+  </body>
+</html>

mockup/styles.css

@@ -0,0 +1,879 @@
+:root {
+  /* Color Palette */
+  --color-primary: #340649;
+  --color-primary-rgb: 52, 6, 73;
+  --color-secondary: #67486a;
+  --color-background: #f9f6e9;
+  --color-accent: #c8a668;
+  --color-accent-rgb: 200, 166, 104;
+  --color-white: #ffffff;
+  --color-text-dark: #340649;
+  --color-text-light: #f9f6e9;
+  --color-text-muted: #67486a;
+
+  /* Typography */
+  --font-display: "Playfair Display", serif;
+  --font-body: "Fira Code", monospace;
+
+  /* Spacing */
+  --spacing-container: 1200px;
+  --spacing-section: 6rem;
+  --spacing-mobile: 1.5rem;
+
+  /* Effects */
+  --shadow-card: 0 8px 32px rgba(52, 6, 73, 0.05);
+  --shadow-hover: 0 12px 48px rgba(52, 6, 73, 0.1);
+  --radius-button: 50px;
+  --radius-card: 16px;
+  --transition: 0.3s ease;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: var(--font-body);
+  background-color: var(--color-background);
+  color: var(--color-text-dark);
+  line-height: 1.6;
+  overflow-x: hidden;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--font-display);
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+/* Fade In Animation */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.fade-in {
+  opacity: 0;
+  transform: translateY(30px);
+  transition: opacity 0.6s ease, transform 0.6s ease;
+}
+
+.fade-in.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.container {
+  max-width: var(--spacing-container);
+  margin: 0 auto;
+  padding: 0 var(--spacing-mobile);
+}
+
+/* Header */
+.header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  padding: 1rem 0;
+  background-color: rgba(249, 246, 233, 0.9);
+  backdrop-filter: blur(10px);
+  z-index: 1000;
+  border-bottom: 1px solid rgba(103, 72, 106, 0.1);
+}
+
+.header-inner {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.logo {
+  font-family: var(--font-display);
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--color-primary);
+  text-decoration: none;
+  letter-spacing: -0.02em;
+}
+
+/* Hide hamburger on desktop */
+.menu-toggle {
+  display: none;
+}
+
+.nav ul {
+  display: flex;
+  gap: 2rem;
+  list-style: none;
+}
+
+.nav a {
+  text-decoration: none;
+  color: var(--color-text-dark);
+  font-weight: 500;
+  transition: color var(--transition);
+  position: relative;
+  padding-bottom: 4px;
+}
+
+.nav a::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 0;
+  height: 2px;
+  background-color: var(--color-accent);
+  transition: width 0.3s ease, left 0.3s ease;
+}
+
+.nav a:hover::after,
+.nav a.active::after {
+  width: 100%;
+  left: 0;
+}
+
+.nav a:hover {
+  color: var(--color-accent);
+}
+
+/* Hero Section */
+.hero {
+  padding: 8rem 0 5rem;
+  min-height: 90vh;
+  display: flex;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+  background-color: var(--color-primary);
+  background: linear-gradient(135deg, #340649 0%, #4a0e5f 100%);
+}
+
+.hero::before {
+  content: "";
+  position: absolute;
+  top: -20%;
+  right: -10%;
+  width: 50vw;
+  height: 50vw;
+  background: radial-gradient(
+    circle,
+    rgba(103, 72, 106, 0.3) 0%,
+    rgba(52, 6, 73, 0) 70%
+  );
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.hero-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 4rem;
+  align-items: center;
+}
+
+.hero-content h1 {
+  font-size: 3.5rem;
+  margin-bottom: 1rem;
+  color: var(--color-text-light);
+}
+
+.hero-content p {
+  font-size: 1.25rem;
+  color: rgba(249, 246, 233, 0.9);
+  margin-bottom: 2rem;
+  max-width: 90%;
+}
+
+.hero-actions {
+  display: flex;
+  gap: 1rem;
+}
+
+.hero-image {
+  position: relative;
+}
+
+.hero-image img {
+  width: 100%;
+  height: auto;
+  border-radius: 24px 24px 0 24px;
+  box-shadow: 20px 20px 0 var(--color-accent);
+  object-fit: cover;
+}
+
+/* Buttons */
+.btn {
+  display: inline-block;
+  padding: 0.8rem 2rem;
+  border-radius: var(--radius-button);
+  text-decoration: none;
+  font-weight: 500;
+  transition: var(--transition);
+  cursor: pointer;
+}
+
+.btn-primary {
+  background-color: var(--color-accent);
+  color: var(--color-white);
+  border: 2px solid var(--color-accent);
+  box-shadow: 0 4px 12px rgba(200, 166, 104, 0.3);
+}
+
+.btn-primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(200, 166, 104, 0.4);
+}
+
+.btn-secondary {
+  background-color: transparent;
+  color: #67486A;
+  border: 2px solid #67486A;
+}
+
+/* Specific for Hero section dark background */
+.hero .btn-secondary {
+  color: var(--color-white);
+  border-color: var(--color-white);
+}
+
+.hero .btn-secondary:hover {
+  background-color: var(--color-white);
+  color: var(--color-primary);
+}
+
+.btn-secondary:hover {
+  background-color: #67486A;
+  color: var(--color-white);
+}
+
+/* About Section */
+.section-about {
+  padding: var(--spacing-section) 0;
+  background-color: var(--color-white);
+}
+
+.about-content {
+  display: flex;
+  gap: 3rem;
+  align-items: center;
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+.about-image {
+  flex: 1;
+}
+
+.about-image img {
+  width: 100%;
+  border-radius: 16px;
+  box-shadow: 0 8px 24px rgba(52, 6, 73, 0.1);
+}
+
+.about-text {
+  flex: 1;
+}
+
+.about-text p {
+  font-size: 1.1rem;
+  color: var(--color-secondary);
+  margin-bottom: 1.5rem;
+  line-height: 1.8;
+}
+
+.about-actions {
+  display: flex;
+  gap: 1rem;
+}
+
+/* Services */
+.section-services {
+  padding: var(--spacing-section) 0;
+}
+
+.section-title {
+  text-align: center;
+  margin-bottom: 3rem;
+}
+
+.section-title h2 {
+  font-size: 2.5rem;
+  color: var(--color-primary);
+  margin-bottom: 0.5rem;
+}
+
+.services-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 2rem;
+}
+
+.service-card {
+  background: var(--color-white);
+  padding: 2.5rem;
+  border-radius: var(--radius-card);
+  border-top: 4px solid var(--color-accent);
+  box-shadow: var(--shadow-card);
+  transition: var(--transition);
+  text-align: center;
+}
+
+.service-card:hover {
+  transform: translateY(-5px);
+  box-shadow: var(--shadow-hover);
+}
+
+.service-card h3 {
+  color: var(--color-primary);
+  margin-bottom: 1rem;
+  font-size: 1.5rem;
+}
+
+.service-card p {
+  color: var(--color-secondary);
+}
+
+/* Testimonials */
+.section-testimonials {
+  padding: var(--spacing-section) 0;
+  background-color: var(--color-primary);
+  background: linear-gradient(135deg, #340649 0%, #4a0e5f 100%);
+}
+
+.testimonial-card {
+  text-align: center;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.testimonial-quote {
+  font-family: var(--font-display);
+  font-size: 1.5rem;
+  font-style: italic;
+  color: var(--color-text-light);
+  margin-bottom: 1.5rem;
+}
+
+.testimonial-author {
+  color: var(--color-accent);
+  font-weight: 600;
+}
+
+.section-testimonials .section-title h2 {
+  color: var(--color-text-light);
+}
+
+/* Carousel Styles */
+.carousel-container {
+  position: relative;
+  height: 300px;
+  width: 100%;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.carousel-track-container {
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+.carousel-track {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  position: relative;
+  height: 100%;
+  transition: transform 0.5s ease-in-out;
+}
+
+.carousel-slide {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+}
+
+.carousel-btn {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background: transparent;
+  border: none;
+  color: var(--color-accent);
+  font-size: 2.5rem;
+  cursor: pointer;
+  z-index: 10;
+  transition: color 0.3s ease;
+}
+
+.carousel-btn:hover {
+  color: var(--color-text-light);
+}
+
+.carousel-btn.prev {
+  left: -60px;
+}
+
+.carousel-btn.next {
+  right: -60px;
+}
+
+.carousel-nav {
+  display: flex;
+  justify-content: center;
+  padding: 10px 0;
+  gap: 15px;
+}
+
+.carousel-indicator {
+  border: none;
+  width: 12px;
+  height: 12px;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.carousel-indicator.current-slide {
+  background: var(--color-accent);
+}
+
+/* Contact Form Section */
+.section-contact {
+  padding: var(--spacing-section) 0;
+}
+
+.contact-form-container {
+  display: grid;
+  grid-template-columns: 3fr 2fr;
+  gap: 3rem;
+  max-width: 100%;
+  margin: 0 auto;
+}
+
+.contact-form {
+  background: var(--color-background);
+  padding: 2rem;
+  border-radius: var(--radius-card);
+  box-shadow: var(--shadow-card);
+  border: 1px solid rgba(103, 72, 106, 0.1);
+}
+
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  color: var(--color-primary);
+}
+
+.form-group input,
+.form-group textarea {
+  width: 100%;
+  padding: 0.8rem 1rem;
+  border: 1px solid rgba(103, 72, 106, 0.2);
+  border-radius: 8px;
+  background-color: white;
+  font-family: var(--font-body);
+  font-size: 1rem;
+  transition: border-color 0.3s ease;
+}
+
+.form-group input:focus,
+.form-group textarea:focus {
+  outline: none;
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 3px rgba(200, 166, 104, 0.1);
+}
+
+.contact-info-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.info-card {
+  background: var(--color-background);
+  padding: 1.5rem;
+  border-radius: var(--radius-card);
+  border-left: 4px solid var(--color-accent);
+}
+
+.info-card h3 {
+  font-size: 1.2rem;
+  color: var(--color-primary);
+  margin-bottom: 0.5rem;
+}
+
+.info-card p {
+  color: var(--color-secondary);
+}
+
+/* Footer */
+.footer {
+  background-color: var(--color-primary);
+  color: var(--color-text-light);
+  padding: 4rem 0 2rem;
+}
+
+.footer-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 3rem;
+  margin-bottom: 3rem;
+}
+
+.footer-col h4 {
+  color: var(--color-accent);
+  margin-bottom: 1.5rem;
+  font-size: 1.2rem;
+}
+
+.footer-col ul {
+  list-style: none;
+}
+
+.footer-col li {
+  margin-bottom: 0.8rem;
+}
+
+.footer-col a {
+  color: var(--color-text-light);
+  text-decoration: none;
+  opacity: 0.8;
+  transition: var(--transition);
+}
+
+.footer-col a:hover {
+  opacity: 1;
+  color: var(--color-accent);
+}
+
+.footer-bottom {
+  text-align: center;
+  padding-top: 2rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  font-size: 0.9rem;
+  opacity: 0.6;
+}
+
+/* Tablet Responsive */
+@media (max-width: 1024px) {
+  .hero-grid {
+    gap: 2rem;
+  }
+
+  .hero-content h1 {
+    font-size: 2.8rem;
+  }
+
+  .services-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .footer-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .contact-form-container {
+    grid-template-columns: 1fr;
+    gap: 2rem;
+  }
+}
+
+/* Mobile Responsive */
+@media (max-width: 768px) {
+  :root {
+    --spacing-section: 3rem;
+  }
+
+  /* Fix for Contact Form on Mobile */
+  .contact-form-container {
+    grid-template-columns: 1fr;
+    gap: 2rem;
+  }
+
+  .contact-form {
+    padding: 1.5rem;
+  }
+
+  .header-inner {
+    position: relative;
+    justify-content: space-between; /* Ensure logo and menu are pushed apart */
+  }
+
+  /* Hamburger Menu Button */
+  .menu-toggle {
+    margin-right: -10px; /* Adjust visual alignment with container padding */
+  }
+
+  .nav {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    width: 100%; /* Ensure full width */
+    background-color: var(--color-background);
+    padding: 1rem;
+    box-shadow: 0 4px 12px rgba(52, 6, 73, 0.1);
+    border-radius: 0 0 16px 16px;
+    z-index: 1000; /* Ensure menu is above other content */
+  }
+
+  .nav.active {
+    display: block;
+  }
+
+  .nav ul {
+    flex-direction: column;
+    gap: 1rem;
+    text-align: center;
+  }
+
+  .nav a::after {
+    display: none;
+  }
+
+  .hero {
+    padding: 6rem 0 3rem;
+    min-height: auto;
+  }
+
+  .hero-grid {
+    grid-template-columns: 1fr;
+    text-align: center;
+    gap: 2rem;
+  }
+
+  .hero-content {
+    order: 2;
+  }
+
+  .hero-image {
+    order: 1;
+  }
+
+  .hero-actions {
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+
+  .hero-content h1 {
+    font-size: 2rem;
+  }
+
+  .hero-content p {
+    font-size: 1rem;
+    max-width: 100%;
+  }
+
+  .hero-image img {
+    border-radius: 16px;
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+    max-width: 280px;
+    margin: 0 auto;
+    display: block;
+  }
+
+  .section-title h2 {
+    font-size: 1.8rem;
+  }
+
+  .services-grid {
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+  }
+
+  .service-card {
+    padding: 1.5rem;
+  }
+
+  .service-card img {
+    width: 60px;
+    height: 60px;
+  }
+
+  .testimonial-quote {
+    font-size: 1.2rem;
+  }
+
+  .footer-grid {
+    grid-template-columns: 1fr;
+    text-align: center;
+    gap: 2rem;
+  }
+
+  /* About Section Mobile */
+  .about-content {
+    flex-direction: column;
+    text-align: center;
+  }
+
+  .about-image {
+    order: 1;
+  }
+
+  .about-image img {
+    max-width: 280px;
+    margin: 0 auto;
+    display: block;
+  }
+
+  .about-text {
+    order: 2;
+  }
+
+  .about-actions {
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .about-actions .btn {
+    width: 100%;
+    text-align: center;
+  }
+
+  /* Hamburger Menu Button */
+  .menu-toggle {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 6px;
+    cursor: pointer;
+    padding: 10px;
+    background: transparent;
+    border: none;
+    z-index: 1001;
+    order: 3;
+  }
+
+  .menu-toggle span {
+    display: block;
+    width: 28px;
+    height: 2px;
+    background-color: var(--color-primary);
+    border-radius: 2px;
+    transition: all 0.3s ease;
+    transform-origin: center;
+  }
+
+  /* Animated X when active */
+  .menu-toggle.active span:nth-child(1) {
+    transform: rotate(45deg) translate(6px, 6px);
+  }
+
+  .menu-toggle.active span:nth-child(2) {
+    opacity: 0;
+    transform: scaleX(0);
+  }
+
+  .menu-toggle.active span:nth-child(3) {
+    transform: rotate(-45deg) translate(6px, -6px);
+  }
+
+  /* Hide CTA button on mobile header */
+  .header-cta {
+    display: none;
+  }
+
+  .nav.active {
+    display: block;
+    animation: slideDown 0.3s ease;
+  }
+
+  @keyframes slideDown {
+    from {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .nav ul {
+    flex-direction: column;
+    gap: 0;
+  }
+
+  .nav li {
+    border-bottom: 1px solid rgba(103, 72, 106, 0.1);
+  }
+
+  .nav li:last-child {
+    border-bottom: none;
+  }
+
+  .nav a {
+    display: block;
+    padding: 1rem;
+    font-size: 1.1rem;
+    transition: background-color 0.3s ease, color 0.3s ease;
+  }
+
+  .nav a:hover {
+    background-color: rgba(200, 166, 104, 0.1);
+  }
+
+  /* Add CTA inside mobile menu */
+  .nav ul::after {
+    content: 'Agendar';
+    display: block;
+    text-align: center;
+    padding: 1rem 2rem;
+    margin: 1rem;
+    background-color: var(--color-accent);
+    color: white;
+    border-radius: var(--radius-button);
+    font-weight: 500;
+    cursor: pointer;
+  }
+}
+
+/* Small Mobile */
+@media (max-width: 480px) {
+  .container {
+    padding: 0 1rem;
+  }
+
+  .hero-content h1 {
+    font-size: 1.75rem;
+  }
+
+  .hero-actions {
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .hero-actions .btn {
+    width: 100%;
+    text-align: center;
+  }
+
+  .logo img {
+    height: 40px;
+  }
+}

site_requirements.md

@@ -0,0 +1,137 @@
+# 🎨 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).
+