# GAP Implementation Checklist

**Tracking de Implementación**
**Fecha Inicio:** 2025-11-04
**Fecha Estimada Fin:** 2025-11-08
**Tiempo Total:** 3.85 días

---

## Sprint 1: Componentes Críticos (Día 1-2)

### Issue #41: TOC Sticky con ScrollSpy ⏱️ 1 día

**Desarrollo:**
- [ ] Modificar `assets/css/toc.css`
  - [ ] Agregar `position: sticky` con `top: 5.5rem`
  - [ ] Implementar scrollbar personalizado webkit
  - [ ] Implementar scrollbar personalizado firefox
  - [ ] Estilos para `.apus-toc-link.active`
  - [ ] Media queries responsive
- [ ] Modificar `assets/js/toc.js`
  - [ ] Implementar función `initTOCScrollSpy()`
  - [ ] Configurar IntersectionObserver con rootMargin
  - [ ] Observer callback para highlighting
  - [ ] Scroll suave del TOC para mantener visible
  - [ ] Cleanup en beforeunload

**Testing:**
- [ ] TOC permanece visible en scroll (desktop)
- [ ] Link activo se resalta correctamente
- [ ] Smooth scroll al hacer click en TOC link
- [ ] Scrollbar personalizado visible y funcional
- [ ] En mobile: TOC no sticky, posición relativa
- [ ] Keyboard navigation funcional
- [ ] Screen reader anuncia cambios
- [ ] Performance: no lag en scroll

**Browsers:**
- [ ] Chrome (latest)
- [ ] Firefox (latest)
- [ ] Safari (latest)
- [ ] Edge (latest)
- [ ] Mobile Safari (iOS)
- [ ] Chrome Mobile (Android)

**Accesibilidad:**
- [ ] Focus visible en TOC links
- [ ] ARIA attributes correctos
- [ ] Keyboard navigation completa
- [ ] Screen reader friendly
- [ ] Contraste WCAG AA

**Commit & PR:**
- [ ] Branch: `issue-41-toc-sticky-scrollspy`
- [ ] Commit con mensaje descriptivo
- [ ] Push a remote
- [ ] Create PR con checklist en body
- [ ] Request review
- [ ] Merge después de approval

---

### Issue #42: Navbar Underline Hover ⏱️ 0.5 días

**Desarrollo:**
- [ ] Modificar `assets/css/header.css`
  - [ ] Agregar `position: relative` a `.navbar-nav .nav-link`
  - [ ] Implementar `::after` pseudo-elemento
  - [ ] Estilos hover con `width: 100%`
  - [ ] Background color hover rgba
  - [ ] Estados active y current
  - [ ] Focus state para accesibilidad
  - [ ] Media query para ocultar en mobile

**Testing:**
- [ ] Underline aparece en hover (desktop)
- [ ] Animación suave de width
- [ ] Color turquesa #61c7cd correcto
- [ ] Background color sutil en hover
- [ ] Active page muestra underline
- [ ] En mobile: sin underline
- [ ] Focus state visible
- [ ] No layout shift

**Browsers:**
- [ ] Chrome (latest)
- [ ] Firefox (latest)
- [ ] Safari (latest)
- [ ] Edge (latest)

**Visual QA:**
- [ ] Underline centered bajo texto
- [ ] Height 2px exacto
- [ ] Transición 0.3s suave
- [ ] No gaps o glitches

**Commit & PR:**
- [ ] Branch: `issue-42-navbar-underline`
- [ ] Commit con mensaje descriptivo
- [ ] Push a remote
- [ ] Create PR
- [ ] Merge después de approval

---

### Issue #43: Verificar Colores Notification Bar ⏱️ 0.25 días

**Desarrollo:**
- [ ] Auditar `assets/css/notification-bar.css`
  - [ ] Verificar background: #4C5C6B
  - [ ] Verificar link color: #61c7cd
  - [ ] Verificar link hover: #4fb3b9
  - [ ] Verificar close button color
  - [ ] Verificar border-bottom si existe
  - [ ] Agregar focus states si faltan

**Testing:**
- [ ] Colores exactos match RDash
- [ ] Links se ven claramente
- [ ] Hover effect en links
- [ ] Close button visible y funcional
- [ ] Contraste WCAG AA

**Visual QA:**
- [ ] Background color exacto con eyedropper
- [ ] Link underline visible
- [ ] Hover transition suave

**Commit & PR:**
- [ ] Branch: `issue-43-notification-bar-colors`
- [ ] Commit con cambios (si hay)
- [ ] Push a remote
- [ ] Create PR o cerrar issue si ya está correcto

---

## Sprint 2: Componentes Altos (Día 2-3)

### Issue #44: Botón "Let's Talk" Header ⏱️ 0.5 días

**Desarrollo:**
- [ ] Modificar `header.php`
  - [ ] Agregar botón después de menu items
  - [ ] Wrapper con `d-none d-lg-block`
  - [ ] Link con clase `btn-lets-talk`
  - [ ] Aria-label para accesibilidad
  - [ ] URL dinámico a página contacto
- [ ] Modificar `assets/css/header.css`
  - [ ] Gradiente naranja #FF6B35 → #FF8C42
  - [ ] Padding 0.875rem 1.75rem
  - [ ] Border-radius 8px
  - [ ] Box-shadow con rgba naranja
  - [ ] Hover: transform y shadow
  - [ ] Focus state
  - [ ] Media query hide < 992px

**Testing:**
- [ ] Botón visible en desktop (>= 992px)
- [ ] Botón oculto en tablet/mobile
- [ ] Gradiente se ve correctamente
- [ ] Hover effect suave
- [ ] Click redirige a contacto
- [ ] Focus state visible
- [ ] No afecta menu mobile

**Visual QA:**
- [ ] Gradiente correcto con eyedropper
- [ ] Posición alineada con navbar
- [ ] No overlapping con menu items
- [ ] Sombra visible pero sutil

**Commit & PR:**
- [ ] Branch: `issue-44-lets-talk-button`
- [ ] Commit cambios PHP y CSS
- [ ] Push a remote
- [ ] Create PR con screenshot
- [ ] Merge después de approval

---

### Issue #45: Related Posts Cards Grises ⏱️ 0.5 días

**Desarrollo:**
- [ ] Modificar `assets/css/related-posts.css`
  - [ ] Cambiar background a #f7fafc
  - [ ] Agregar border 1px #e2e8f0
  - [ ] Implementar `::before` para borde lateral
  - [ ] Gradiente azul vertical en ::before
  - [ ] Hover: opacity 1 en ::before
  - [ ] Hover: transform translateY(-8px)
  - [ ] Hover: background #ffffff
  - [ ] Hover: border-color #1a73e8
  - [ ] Hover: shadow más profundo
  - [ ] Ajustar padding contenido
  - [ ] Prefers-reduced-motion

**Testing:**
- [ ] Cards tienen fondo gris #f7fafc
- [ ] Hover cambia a blanco
- [ ] Borde lateral aparece en hover
- [ ] Transform -8px funciona
- [ ] Gradiente azul correcto
- [ ] Imagen zoom en hover
- [ ] Título cambia color en hover
- [ ] No layout shift
- [ ] Reduced motion respetado

**Visual QA:**
- [ ] Gris de fondo correcto
- [ ] Borde lateral 4px width
- [ ] Gradiente smooth sin bandas
- [ ] Transición suave

**Browsers:**
- [ ] Chrome (latest)
- [ ] Firefox (latest)
- [ ] Safari (latest)
- [ ] Edge (latest)
- [ ] Mobile Safari
- [ ] Chrome Mobile

**Commit & PR:**
- [ ] Branch: `issue-45-related-posts-gray`
- [ ] Commit con cambios CSS
- [ ] Push a remote
- [ ] Create PR con before/after screenshots
- [ ] Merge después de approval

---

## Sprint 3: Componentes Medios (Día 3-4)

### Issue #46: Paginación Profesional ⏱️ 0.5 días

**Desarrollo:**
- [ ] Modificar `style.css` (líneas 437-479)
  - [ ] Cambiar border a 2px
  - [ ] Cambiar border-radius a 8px
  - [ ] Transition cubic-bezier
  - [ ] Hover: background #1a73e8
  - [ ] Hover: transform translateY(-2px)
  - [ ] Hover: box-shadow
  - [ ] Current: gradiente azul
  - [ ] Current: box-shadow
  - [ ] Dots: border none
  - [ ] Focus state
  - [ ] Active state
  - [ ] Prefers-reduced-motion
  - [ ] Media query mobile

**Testing:**
- [ ] Números tienen borde 2px
- [ ] Border-radius 8px visible
- [ ] Hover eleva elemento
- [ ] Hover cambia a azul
- [ ] Current tiene gradiente
- [ ] Dots sin border
- [ ] Focus visible
- [ ] Mobile: tamaños reducidos
- [ ] Keyboard navigation

**Visual QA:**
- [ ] Gradiente current smooth
- [ ] Shadow depth correcto
- [ ] Transform smooth
- [ ] Colores exactos

**Commit & PR:**
- [ ] Branch: `issue-46-pagination-professional`
- [ ] Commit con cambios
- [ ] Push a remote
- [ ] Create PR
- [ ] Merge después de approval

---

### Issue #47: Modal Contacto Refinamiento ⏱️ 0.25 días

**Desarrollo:**
- [ ] Modificar `assets/css/modal-contact.css`
  - [ ] Border-radius 16px en .modal-content
  - [ ] Box-shadow 0 20px 60px
  - [ ] Header border-radius 16px 16px 0 0
  - [ ] Btn-close filter invert para blanco
  - [ ] Form-control border-radius 8px
  - [ ] Form-control border 2px
  - [ ] Focus: border-color #1a73e8
  - [ ] Btn-primary gradiente azul
  - [ ] Btn-primary hover transform
  - [ ] Media query mobile

**Testing:**
- [ ] Modal esquinas redondeadas 16px
- [ ] Sombra profunda visible
- [ ] Botón close blanco
- [ ] Inputs redondeados 8px
- [ ] Focus azul en inputs
- [ ] Botón gradiente azul
- [ ] Botón hover eleva
- [ ] Mobile: padding reducido

**Visual QA:**
- [ ] Border-radius smooth
- [ ] Shadow no too harsh
- [ ] Close button contraste OK
- [ ] Gradiente button smooth

**Commit & PR:**
- [ ] Branch: `issue-47-modal-refinement`
- [ ] Commit con cambios
- [ ] Push a remote
- [ ] Create PR
- [ ] Merge después de approval

---

## Sprint 4: Componentes Bajos (Día 4+)

### Issue #48: Animación Pulse CTA Box ⏱️ 0.25 días

**Desarrollo:**
- [ ] Modificar `assets/css/cta-box-sidebar.css`
  - [ ] Crear @keyframes pulse
  - [ ] Scale 1 → 1.02 → 1
  - [ ] Shadow animation
  - [ ] Aplicar animation 3s infinite
  - [ ] Hover: animation none
  - [ ] Prefers-reduced-motion: animation none
  - [ ] Transform-origin center

**Testing:**
- [ ] Animación sutil visible
- [ ] 3 segundos de duración
- [ ] Loop infinito funciona
- [ ] Hover detiene animación
- [ ] Reduced motion desactiva
- [ ] No performance issues

**Visual QA:**
- [ ] Pulse sutil, no molesto
- [ ] Shadow expansion smooth
- [ ] Scale imperceptible

**Commit & PR:**
- [ ] Branch: `issue-48-pulse-animation`
- [ ] Commit con cambios
- [ ] Push a remote
- [ ] Create PR
- [ ] Merge después de approval (opcional)

---

### Issue #49: Hero Section Padding ⏱️ 0.1 días

**Desarrollo:**
- [ ] Modificar `assets/css/hero-section.css`
  - [ ] Padding 3rem 1rem
  - [ ] Text-align center
  - [ ] Media query tablet: 2rem 1rem
  - [ ] Media query mobile: 1.5rem 0.75rem

**Testing:**
- [ ] Padding correcto en desktop
- [ ] Padding reducido en tablet
- [ ] Padding mínimo en mobile
- [ ] Text centrado
- [ ] No overflow

**Visual QA:**
- [ ] Espaciado balanceado
- [ ] Texto centrado visualmente

**Commit & PR:**
- [ ] Branch: `issue-49-hero-padding`
- [ ] Commit con cambios
- [ ] Push a remote
- [ ] Create PR
- [ ] Merge después de approval

---

## Post-Implementation

### Testing Final Completo

**Funcionalidad:**
- [ ] Todas las animaciones funcionan
- [ ] Todos los hovers responden
- [ ] Todos los focus states visibles
- [ ] Navegación por teclado completa
- [ ] Links funcionan correctamente

**Visual:**
- [ ] Colores exactos RDash verificados
- [ ] Gradientes smooth sin bandas
- [ ] Sombras depth correcto
- [ ] Border-radius consistente
- [ ] Spacing balanceado

**Performance:**
- [ ] Lighthouse score > 90
- [ ] No layout shifts (CLS < 0.1)
- [ ] Animaciones 60fps
- [ ] Scroll smooth
- [ ] No memoria leaks

**Accesibilidad:**
- [ ] WCAG AA compliance
- [ ] Keyboard navigation completa
- [ ] Screen reader friendly
- [ ] Focus indicators visible
- [ ] ARIA labels correctos
- [ ] Contraste suficiente

**Responsive:**
- [ ] Desktop (>= 992px) ✓
- [ ] Tablet (768px - 991px) ✓
- [ ] Mobile (< 768px) ✓
- [ ] Small mobile (< 576px) ✓

**Cross-Browser:**
- [ ] Chrome Windows/Mac
- [ ] Firefox Windows/Mac
- [ ] Safari Mac/iOS
- [ ] Edge Windows
- [ ] Chrome Android

**Edge Cases:**
- [ ] Prefers-reduced-motion
- [ ] Prefers-color-scheme: dark
- [ ] High contrast mode
- [ ] Zoom 200%
- [ ] Touch devices
- [ ] Slow network

### Documentación

- [ ] Actualizar CHANGELOG.md
- [ ] Documentar nuevos componentes
- [ ] Screenshots antes/después
- [ ] Update README si necesario
- [ ] Cerrar todos los issues

### Deployment

- [ ] Merge todos los PRs a main
- [ ] Tag version (v1.1.0?)
- [ ] Deploy a staging
- [ ] QA en staging
- [ ] Deploy a production
- [ ] Monitoring post-deploy

---

## Métricas de Éxito

### Antes vs Después

| Métrica | Antes | Después | Objetivo |
|---------|-------|---------|----------|
| Componentes Implementados | 50% | 100% | ✓ |
| Visual Consistency | 70% | 100% | ✓ |
| UX Score | 7/10 | 9/10 | ✓ |
| Lighthouse Performance | 90+ | 90+ | ✓ |
| Accessibility Score | 95+ | 95+ | ✓ |
| Cross-browser Issues | ~5 | 0 | ✓ |

### KPIs

- [ ] Time on page increase > 10%
- [ ] Bounce rate decrease > 5%
- [ ] CTA click rate increase > 15%
- [ ] Mobile engagement increase > 10%
- [ ] Page load time < 2s
- [ ] Core Web Vitals all green

---

## Issues Tracking

### GitHub Issues Status

- [ ] #41 - TOC Sticky con ScrollSpy → **Status:** Not Started
- [ ] #42 - Navbar Underline Hover → **Status:** Not Started
- [ ] #43 - Notification Bar Colors → **Status:** Not Started
- [ ] #44 - Botón "Let's Talk" → **Status:** Not Started
- [ ] #45 - Related Posts Grises → **Status:** Not Started
- [ ] #46 - Paginación Profesional → **Status:** Not Started
- [ ] #47 - Modal Refinamiento → **Status:** Not Started
- [ ] #48 - Pulse Animation → **Status:** Not Started
- [ ] #49 - Hero Padding → **Status:** Not Started

### Progress Tracking

```
Sprint 1: ░░░░░░░░░░ 0/3 issues
Sprint 2: ░░░░░░░░░░ 0/2 issues
Sprint 3: ░░░░░░░░░░ 0/2 issues
Sprint 4: ░░░░░░░░░░ 0/2 issues

Total: ░░░░░░░░░░ 0/9 issues (0%)
```

---

## Notas y Observaciones

### Día 1
- [ ] Iniciar implementación

### Día 2
- [ ]

### Día 3
- [ ]

### Día 4
- [ ]

### Blockers
- [ ] Ninguno identificado

### Aprendizajes
- [ ]

---

## Sign-off

**Desarrollo Completado:**
- [ ] Todos los issues implementados
- [ ] Todos los tests pasados
- [ ] Todos los PRs merged
- [ ] Documentación actualizada

**QA Aprobado:**
- [ ] Testing funcional completo
- [ ] Testing visual completo
- [ ] Testing cross-browser completo
- [ ] Testing accesibilidad completo

**Deployment:**
- [ ] Staging deployment exitoso
- [ ] Production deployment exitoso
- [ ] Monitoring sin errores
- [ ] Stakeholders notificados

**Firma:**
- Desarrollador: ________________ Fecha: _______
- QA: ________________ Fecha: _______
- Product Owner: ________________ Fecha: _______

---

**Última actualización:** 2025-11-04
**Próxima revisión:** Diaria durante implementación