diff --git a/wp-content/themes/apus-theme/assets/css/footer-contact.css b/wp-content/themes/apus-theme/assets/css/footer-contact.css
new file mode 100644
index 00000000..1eab21f7
--- /dev/null
+++ b/wp-content/themes/apus-theme/assets/css/footer-contact.css
@@ -0,0 +1,101 @@
+/**
+ * Footer Contact Form Styles
+ *
+ * Styles for the footer section including the contact form
+ * and contact information.
+ *
+ * @package Apus_Theme
+ * @since 1.0.0
+ */
+
+/* ========================================
+   Contact Form Styles
+   ======================================== */
+
+.form-control {
+    border: 2px solid var(--color-neutral-100);
+    border-radius: 6px;
+    padding: 0.625rem 1rem;
+    transition: all 0.3s ease;
+}
+
+.form-control:focus {
+    border-color: var(--color-orange-primary);
+    outline: none;
+}
+
+.btn-contact-submit {
+    background-color: var(--color-orange-primary);
+    color: #ffffff;
+    font-weight: 600;
+    padding: 0.75rem 2rem;
+    border: none;
+    border-radius: 6px;
+    transition: all 0.3s ease;
+}
+
+.btn-contact-submit:hover {
+    background-color: var(--color-orange-hover);
+    color: #ffffff;
+}
+
+.btn-submit-form {
+    background-color: var(--color-orange-primary);
+    color: #ffffff;
+    font-weight: 600;
+    padding: 0.75rem;
+    border: none;
+    border-radius: 6px;
+    transition: all 0.3s ease;
+}
+
+.btn-submit-form:hover {
+    background-color: var(--color-orange-hover);
+    color: #ffffff;
+}
+
+/* ========================================
+   Footer Styles
+   ======================================== */
+
+footer {
+    background-color: var(--color-navy-dark);
+    color: rgba(255, 255, 255, 0.8);
+    padding: 3rem 0;
+}
+
+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
+   ======================================== */
+
+.contact-info i {
+    color: var(--color-orange-primary);
+}
+
+/* NOTA: NO sobrescribir estilos Bootstrap h6 - Template usa defaults */
diff --git a/wp-content/themes/apus-theme/assets/css/style.css b/wp-content/themes/apus-theme/assets/css/style.css
index b4fefd99..37879e1c 100644
--- a/wp-content/themes/apus-theme/assets/css/style.css
+++ b/wp-content/themes/apus-theme/assets/css/style.css
@@ -1009,17 +1009,16 @@ img {
    El CSS de componentes individuales DEBE ir en archivos separados en:
    wp-content/themes/apus-theme/assets/css/[nombre-componente].css
 
-   Ejemplos:
+   Ejemplos de componentes con archivos individuales:
    - CTA Box Sidebar      → cta-box-sidebar.css
    - Share Buttons        → social-share.css
    - Related Posts        → related-posts.css
    - TOC                  → toc.css
    - Pagination           → pagination.css
    - Hero Section         → hero.css
-   - Footer Contact Form  → (ver documentación - CSS en este archivo)
+   - Footer Contact Form  → footer-contact.css
 
-   EXCEPCIÓN: Footer Contact Form según documentación CSS-ESPECIFICO.md
-   debe estar en este archivo style.css (líneas 1175+)
+   SIN EXCEPCIONES: TODOS los componentes deben tener su propio archivo CSS.
 
    ======================================== */
 
@@ -1071,90 +1070,14 @@ img {
 
    ======================================== */
 
-/* === FOOTER CONTACT FORM === */
+/* ========================================
+   ❌ FOOTER CONTACT FORM - NO AGREGAR CSS AQUÍ
+   ========================================
 
-/* Contact Form Styles */
+   El CSS de Footer Contact Form DEBE estar en:
+   wp-content/themes/apus-theme/assets/css/footer-contact.css
 
-.form-control {
-    border: 2px solid var(--color-neutral-100);
-    border-radius: 6px;
-    padding: 0.625rem 1rem;
-    transition: all 0.3s ease;
-}
+   Este archivo ya existe y está correctamente enqueued.
+   Ver: inc/enqueue-scripts.php líneas 506-517
 
-.form-control:focus {
-    border-color: var(--color-orange-primary);
-    outline: none;
-}
-
-.btn-contact-submit {
-    background-color: var(--color-orange-primary);
-    color: #ffffff;
-    font-weight: 600;
-    padding: 0.75rem 2rem;
-    border: none;
-    border-radius: 6px;
-    transition: all 0.3s ease;
-}
-
-.btn-contact-submit:hover {
-    background-color: var(--color-orange-hover);
-    color: #ffffff;
-}
-
-.btn-submit-form {
-    background-color: var(--color-orange-primary);
-    color: #ffffff;
-    font-weight: 600;
-    padding: 0.75rem;
-    border: none;
-    border-radius: 6px;
-    transition: all 0.3s ease;
-}
-
-.btn-submit-form:hover {
-    background-color: var(--color-orange-hover);
-    color: #ffffff;
-}
-
-/* Footer Styles */
-
-footer {
-    background-color: var(--color-navy-dark);
-    color: rgba(255, 255, 255, 0.8);
-    padding: 3rem 0;
-}
-
-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 */
-
-.contact-info i {
-    color: var(--color-orange-primary);
-}
-
-/* ELIMINADO: .contact-info h6 para mantener Bootstrap default del template */
+   ======================================== */
diff --git a/wp-content/themes/apus-theme/inc/enqueue-scripts.php b/wp-content/themes/apus-theme/inc/enqueue-scripts.php
index fdba256e..f5b630d3 100644
--- a/wp-content/themes/apus-theme/inc/enqueue-scripts.php
+++ b/wp-content/themes/apus-theme/inc/enqueue-scripts.php
@@ -497,12 +497,24 @@ function apus_enqueue_cta_box_sidebar_assets() {
 add_action('wp_enqueue_scripts', 'apus_enqueue_cta_box_sidebar_assets', 17);
 
 /**
- * ELIMINADO: apus_enqueue_footer_contact_assets
- * Motivo: footer-contact.css NO está documentado - CSS debe estar en style.css
- * Ver: theme-documentation/16-componente-footer-contact-form/CSS-ESPECIFICO.md
+ * Enqueue Footer Contact Form styles
  *
- * NOTA: footer-contact.js SÍ existe y es correcto - se carga desde otro lado
+ * ARQUITECTURA CORRECTA: Cada componente debe tener su propio archivo CSS
+ * Footer Contact Form CSS ahora está en su archivo individual
+ * Ver: wp-content/themes/apus-theme/assets/css/footer-contact.css
  */
+function apus_enqueue_footer_contact_assets() {
+    // Footer Contact CSS
+    wp_enqueue_style(
+        'apus-footer-contact',
+        get_template_directory_uri() . '/assets/css/footer-contact.css',
+        array('apus-bootstrap'),
+        APUS_VERSION,
+        'all'
+    );
+}
+
+add_action('wp_enqueue_scripts', 'apus_enqueue_footer_contact_assets', 18);
 
 /**
  * Enqueue Hero Section styles (Issue #40)