From 861267e6994d6018f038124acbd85800c2d714eb Mon Sep 17 00:00:00 2001
From: FrankZamora <prime.leads.app@gmail.com>
Date: Sat, 8 Nov 2025 19:34:58 -0600
Subject: [PATCH] =?UTF-8?q?Fix=20Footer=20Principal:=20Reemplazar=20CSS=20?=
 =?UTF-8?q?incorrecto=20y=20eliminar=20duplicaci=C3=B3n=20-=20Issue=20#136?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

PROBLEMA:
- componente-footer-principal.css contenía 526 líneas de código de HEADER
- Estilos de footer estaban duplicados en componente-footer-contact-form.css
- Arquitectura modular no se cumplía

SOLUCIÓN:
1. Reemplazado componente-footer-principal.css con CSS correcto de footer (50 líneas)
   - footer base con navy-dark background
   - footer h5 títulos blancos
   - footer a enlaces con hover naranja
   - footer .btn-primary botón newsletter naranja
   - Según documentación CSS-ESPECIFICO.md líneas 987-1021

2. Eliminado duplicación en componente-footer-contact-form.css
   - Removidas líneas 64-88 (estilos de footer)
   - Archivo ahora solo contiene estilos de contact form

3. Version bump a 1.0.19

ARCHIVOS MODIFICADOS:
- wp-content/themes/apus-theme/assets/css/componente-footer-principal.css (526→50 líneas)
- wp-content/themes/apus-theme/assets/css/componente-footer-contact-form.css (119→88 líneas)
- wp-content/themes/apus-theme/functions.php (v1.0.18→1.0.19)

VERIFICACIÓN:
- ✅ HTML en footer.php ya estaba correcto
- ✅ CSS ahora en archivo correcto según arquitectura modular
- ✅ Sin duplicación de estilos
- ✅ Código de header que estaba en footer-principal.css no se usaba

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../css/componente-footer-contact-form.css    |  33 --
 .../css/componente-footer-principal.css       | 539 ++----------------
 wp-content/themes/apus-theme/functions.php    |   2 +-
 3 files changed, 33 insertions(+), 541 deletions(-)

diff --git a/wp-content/themes/apus-theme/assets/css/componente-footer-contact-form.css b/wp-content/themes/apus-theme/assets/css/componente-footer-contact-form.css
index 4a53b8db..818b9445 100644
--- a/wp-content/themes/apus-theme/assets/css/componente-footer-contact-form.css
+++ b/wp-content/themes/apus-theme/assets/css/componente-footer-contact-form.css
@@ -54,39 +54,6 @@
     color: #ffffff;
 }
 
-/* ========================================
-   Footer Styles
-   ======================================== */
-
-/* NOTA: background-color, color y padding usan clases Bootstrap nativas:
-   bg-dark, text-white, py-5 - NO sobrescribir */
-
-footer h5 {
-    color: #ffffff;
-    font-weight: 600;
-    margin-bottom: 1rem;
-}
-
-footer a {
-    color: rgba(255, 255, 255, 0.8);
-    text-decoration: none;
-    transition: color 0.3s ease;
-}
-
-footer a:hover {
-    color: var(--color-orange-primary);
-}
-
-footer .btn-primary {
-    background-color: var(--color-orange-primary);
-    border-color: var(--color-orange-primary);
-}
-
-footer .btn-primary:hover {
-    background-color: var(--color-orange-hover);
-    border-color: var(--color-orange-hover);
-}
-
 /* ========================================
    Contact Info Styles
    ======================================== */
diff --git a/wp-content/themes/apus-theme/assets/css/componente-footer-principal.css b/wp-content/themes/apus-theme/assets/css/componente-footer-principal.css
index a78a6f72..7bc170a6 100644
--- a/wp-content/themes/apus-theme/assets/css/componente-footer-principal.css
+++ b/wp-content/themes/apus-theme/assets/css/componente-footer-principal.css
@@ -1,525 +1,50 @@
 /**
- * Header Styles - Sticky Navigation with Hamburger Menu
+ * Footer Principal Styles
  *
- * This file contains all styles for the site header including:
- * - Sticky header behavior
- * - Desktop horizontal navigation
- * - Mobile hamburger menu
- * - Responsive breakpoints
- * - Accessibility features
+ * RESPONSABILIDAD: Estilos del footer principal del sitio
+ * - Background navy dark
+ * - Títulos y enlaces
+ * - Botón de newsletter
+ * - Hover states
  *
  * @package Apus_Theme
- * @since 1.0.0
+ * @since 1.0.19
+ * @source apus-theme-template/css/style.css (líneas 987-1021)
+ * @reference CSS-ESPECIFICO.md
  */
 
-/* ==========================================================================
-   Header Base Styles
-   ========================================================================== */
+/* ========================================
+   FOOTER
+   ======================================== */
 
-.site-header {
-  position: sticky;
-  top: 0;
-  left: 0;
-  right: 0;
-  width: 100%;
-  background-color: var(--header-bg, #ffffff);
-  box-shadow: var(--header-shadow, 0 2px 4px rgba(0, 0, 0, 0.1));
-  z-index: var(--z-header, 1000);
-  transition: box-shadow 0.3s ease, background-color 0.3s ease;
+footer {
+    background-color: var(--color-navy-dark);
+    color: rgba(255, 255, 255, 0.8);
+    padding: 3rem 0;
 }
 
-/* Enhanced shadow when scrolled */
-.site-header.scrolled {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+footer h5 {
+    color: #ffffff;
+    font-weight: 600;
+    margin-bottom: 1rem;
 }
 
-.header-inner {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1rem;
-  max-width: 1200px;
-  margin: 0 auto;
-  min-height: var(--header-height, 70px);
+footer a {
+    color: rgba(255, 255, 255, 0.8);
+    text-decoration: none;
+    transition: color 0.3s ease;
 }
 
-/* ==========================================================================
-   Site Branding / Logo
-   ========================================================================== */
-
-.site-branding {
-  flex-shrink: 0;
-  z-index: 2;
+footer a:hover {
+    color: var(--color-orange-primary);
 }
 
-.site-identity {
-  display: flex;
-  flex-direction: column;
+footer .btn-primary {
+    background-color: var(--color-orange-primary);
+    border-color: var(--color-orange-primary);
 }
 
-.site-title {
-  margin: 0;
-  font-size: 1.5rem;
-  font-weight: var(--font-weight-bold, 700);
-  line-height: 1.2;
-}
-
-.site-title a {
-  color: var(--color-dark, #212529);
-  text-decoration: none;
-  transition: color 0.3s ease;
-}
-
-.site-title a:hover {
-  color: var(--color-primary, #007bff);
-  text-decoration: none;
-}
-
-.site-title a:focus {
-  outline: 2px solid var(--color-primary, #007bff);
-  outline-offset: 2px;
-  border-radius: 2px;
-}
-
-.site-description {
-  margin: 0.25rem 0 0 0;
-  font-size: 0.875rem;
-  color: var(--color-secondary, #6c757d);
-  line-height: 1.3;
-}
-
-/* Custom Logo */
-.custom-logo-link {
-  display: inline-block;
-  line-height: 0;
-}
-
-.custom-logo {
-  max-height: 50px;
-  width: auto;
-  height: auto;
-  transition: opacity 0.3s ease;
-}
-
-.custom-logo:hover {
-  opacity: 0.8;
-}
-
-/* ==========================================================================
-   Desktop Navigation
-   ========================================================================== */
-
-.desktop-nav {
-  display: none;
-}
-
-.primary-menu {
-  display: flex;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  gap: 0.5rem;
-}
-
-.primary-menu li {
-  position: relative;
-  margin: 0;
-}
-
-.primary-menu a {
-  display: block;
-  padding: 0.75rem 1rem;
-  color: var(--color-dark, #212529);
-  text-decoration: none;
-  font-weight: var(--font-weight-medium, 500);
-  font-size: 1rem;
-  border-radius: 4px;
-  transition: background-color 0.3s ease, color 0.3s ease;
-  position: relative;
-}
-
-.primary-menu a:hover,
-.primary-menu a:focus {
-  background-color: var(--color-light, #f8f9fa);
-  color: var(--color-primary, #007bff);
-  text-decoration: none;
-}
-
-.primary-menu a:focus {
-  outline: 2px solid var(--color-primary, #007bff);
-  outline-offset: 2px;
-}
-
-/* Underline animation - Issue #54 */
-.primary-menu a::after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%) scaleX(0);
-  width: 80%;
-  height: 2px;
-  background: linear-gradient(90deg, var(--color-cyan-primary, #61c7cd) 0%, var(--color-cyan-dark, #4db8c4) 100%);
-  transition: transform var(--transition-base, 0.3s ease);
-  transform-origin: center;
-}
-
-.primary-menu a:hover::after {
-  transform: translateX(-50%) scaleX(1);
-}
-
-/* Current menu item */
-.primary-menu .current-menu-item > a,
-.primary-menu .current_page_item > a {
-  color: var(--color-primary, #007bff);
-  background-color: rgba(0, 123, 255, 0.1);
-}
-
-/* Active link permanent underline */
-.primary-menu .current-menu-item > a::after,
-.primary-menu .current_page_item > a::after {
-  transform: translateX(-50%) scaleX(1);
-}
-
-/* Submenu styles (if needed) */
-.primary-menu .sub-menu {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  min-width: 200px;
-  background-color: #ffffff;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  border-radius: 4px;
-  padding: 0.5rem 0;
-  margin: 0;
-  list-style: none;
-  opacity: 0;
-  visibility: hidden;
-  transform: translateY(-10px);
-  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
-}
-
-.primary-menu li:hover > .sub-menu,
-.primary-menu li:focus-within > .sub-menu {
-  opacity: 1;
-  visibility: visible;
-  transform: translateY(0);
-}
-
-.primary-menu .sub-menu a {
-  padding: 0.5rem 1rem;
-}
-
-/* ==========================================================================
-   Mobile Menu Toggle (Hamburger)
-   ========================================================================== */
-
-.mobile-menu-toggle {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 44px;
-  height: 44px;
-  padding: 0;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  position: relative;
-  z-index: var(--z-header, 1000);
-  transition: transform 0.3s ease;
-}
-
-.mobile-menu-toggle:hover {
-  background-color: var(--color-light, #f8f9fa);
-  border-radius: 4px;
-}
-
-.mobile-menu-toggle:focus {
-  outline: 2px solid var(--color-primary, #007bff);
-  outline-offset: 2px;
-  border-radius: 4px;
-}
-
-/* Hamburger Icon */
-.hamburger-icon {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  width: 24px;
-  height: 18px;
-  position: relative;
-}
-
-.hamburger-icon .line {
-  display: block;
-  width: 100%;
-  height: 2px;
-  background-color: var(--color-dark, #212529);
-  border-radius: 2px;
-  transition: transform 0.3s ease, opacity 0.3s ease;
-  transform-origin: center;
-}
-
-/* Hamburger animation when menu is open */
-.mobile-menu-toggle[aria-expanded="true"] .hamburger-icon .line:nth-child(1) {
-  transform: translateY(8px) rotate(45deg);
-}
-
-.mobile-menu-toggle[aria-expanded="true"] .hamburger-icon .line:nth-child(2) {
-  opacity: 0;
-}
-
-.mobile-menu-toggle[aria-expanded="true"] .hamburger-icon .line:nth-child(3) {
-  transform: translateY(-8px) rotate(-45deg);
-}
-
-/* ==========================================================================
-   Mobile Menu Overlay
-   ========================================================================== */
-
-.mobile-menu-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: var(--z-overlay, 998);
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity 0.3s ease, visibility 0.3s ease;
-}
-
-.mobile-menu-overlay.active {
-  opacity: 1;
-  visibility: visible;
-}
-
-/* ==========================================================================
-   Mobile Navigation
-   ========================================================================== */
-
-.mobile-menu {
-  position: fixed;
-  top: 0;
-  right: 0;
-  width: 280px;
-  max-width: 85%;
-  height: 100%;
-  background-color: #ffffff;
-  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.15);
-  z-index: var(--z-mobile-menu, 999);
-  transform: translateX(100%);
-  transition: transform 0.3s ease;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-}
-
-.mobile-menu.active {
-  transform: translateX(0);
-}
-
-/* Mobile Menu Header */
-.mobile-menu-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1rem;
-  border-bottom: 1px solid #e9ecef;
-  position: sticky;
-  top: 0;
-  background-color: #ffffff;
-  z-index: 10;
-}
-
-.mobile-menu-title {
-  font-size: 1.25rem;
-  font-weight: var(--font-weight-semibold, 600);
-  color: var(--color-dark, #212529);
-}
-
-.mobile-menu-close {
-  width: 44px;
-  height: 44px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: transparent;
-  border: none;
-  font-size: 2rem;
-  line-height: 1;
-  cursor: pointer;
-  color: var(--color-dark, #212529);
-  transition: background-color 0.3s ease, color 0.3s ease;
-  border-radius: 4px;
-}
-
-.mobile-menu-close:hover {
-  background-color: var(--color-light, #f8f9fa);
-  color: var(--color-primary, #007bff);
-}
-
-.mobile-menu-close:focus {
-  outline: 2px solid var(--color-primary, #007bff);
-  outline-offset: 2px;
-}
-
-/* Mobile Menu Items */
-.mobile-primary-menu {
-  list-style: none;
-  margin: 0;
-  padding: 1rem 0;
-}
-
-.mobile-primary-menu li {
-  margin: 0;
-}
-
-.mobile-primary-menu a {
-  display: block;
-  padding: 0.875rem 1.5rem;
-  color: var(--color-dark, #212529);
-  text-decoration: none;
-  font-size: 1.125rem;
-  font-weight: var(--font-weight-medium, 500);
-  border-left: 3px solid transparent;
-  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
-}
-
-.mobile-primary-menu a:hover,
-.mobile-primary-menu a:focus {
-  background-color: var(--color-light, #f8f9fa);
-  color: var(--color-primary, #007bff);
-  border-left-color: var(--color-primary, #007bff);
-  text-decoration: none;
-}
-
-.mobile-primary-menu a:focus {
-  outline: 2px solid var(--color-primary, #007bff);
-  outline-offset: -2px;
-}
-
-/* Current menu item in mobile */
-.mobile-primary-menu .current-menu-item > a,
-.mobile-primary-menu .current_page_item > a {
-  color: var(--color-primary, #007bff);
-  background-color: rgba(0, 123, 255, 0.05);
-  border-left-color: var(--color-primary, #007bff);
-}
-
-/* Mobile submenu */
-.mobile-primary-menu .sub-menu {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  background-color: #f8f9fa;
-}
-
-.mobile-primary-menu .sub-menu a {
-  padding-left: 2.5rem;
-  font-size: 1rem;
-}
-
-/* ==========================================================================
-   Prevent body scroll when mobile menu is open
-   ========================================================================== */
-
-body.mobile-menu-open {
-  overflow: hidden;
-}
-
-/* ==========================================================================
-   Responsive Breakpoints
-   ========================================================================== */
-
-/* Tablet and up - 768px */
-@media (min-width: 768px) {
-  .header-inner {
-    padding: 1rem 2rem;
-  }
-
-  .site-title {
-    font-size: 1.75rem;
-  }
-
-  .desktop-nav {
-    display: block;
-  }
-
-  .mobile-menu-toggle {
-    display: none;
-  }
-
-  .custom-logo {
-    max-height: 60px;
-  }
-}
-
-/* Desktop - 1024px */
-@media (min-width: 1024px) {
-  .primary-menu {
-    gap: 1rem;
-  }
-
-  .primary-menu a {
-    padding: 0.75rem 1.25rem;
-  }
-}
-
-/* Large desktop - 1200px */
-@media (min-width: 1200px) {
-  .header-inner {
-    padding: 1rem 0;
-  }
-}
-
-/* ==========================================================================
-   High Contrast Mode Support
-   ========================================================================== */
-
-@media (prefers-contrast: high) {
-  .site-header {
-    border-bottom: 2px solid currentColor;
-  }
-
-  .primary-menu a:focus,
-  .mobile-menu-toggle:focus,
-  .mobile-menu-close:focus {
-    outline-width: 3px;
-  }
-}
-
-/* ==========================================================================
-   Reduced Motion Support
-   ========================================================================== */
-
-@media (prefers-reduced-motion: reduce) {
-  .site-header,
-  .primary-menu a,
-  .primary-menu a::after,
-  .mobile-menu,
-  .mobile-menu-overlay,
-  .hamburger-icon .line,
-  .mobile-menu-toggle {
-    transition: none;
-  }
-}
-
-/* ==========================================================================
-   Print Styles
-   ========================================================================== */
-
-@media print {
-  .site-header {
-    position: static;
-    box-shadow: none;
-    border-bottom: 1px solid #000;
-  }
-
-  .mobile-menu-toggle,
-  .desktop-nav,
-  .mobile-menu,
-  .mobile-menu-overlay {
-    display: none !important;
-  }
+footer .btn-primary:hover {
+    background-color: var(--color-orange-hover);
+    border-color: var(--color-orange-hover);
 }
diff --git a/wp-content/themes/apus-theme/functions.php b/wp-content/themes/apus-theme/functions.php
index fd675553..ba592747 100644
--- a/wp-content/themes/apus-theme/functions.php
+++ b/wp-content/themes/apus-theme/functions.php
@@ -14,7 +14,7 @@ if (!defined('ABSPATH')) {
 /**
  * Theme Version
  */
-define('APUS_VERSION', '1.0.18');
+define('APUS_VERSION', '1.0.19');
 
 /**
  * Theme Setup