Problema: Archivos CSS creados sin documentación causando sobrescrituras
Archivos eliminados:
- wp-content/themes/apus-theme/assets/css/footer.css (NO documentado)
- wp-content/themes/apus-theme/assets/css/footer-contact.css (NO documentado)
Funciones eliminadas de enqueue-scripts.php:
- apus_enqueue_footer_styles()
- apus_enqueue_footer_contact_assets()
Motivo: La documentación especifica que TODO el CSS del Footer Contact
Form debe estar en style.css, NO en archivos separados.
Ver: theme-documentation/16-componente-footer-contact-form/CSS-ESPECIFICO.md
REGLA: Si NO está documentado → NO debe existir
Issue: #128🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Problema: style.css tenía estilos globales h1-h6 (líneas 110-123) con
font-weight: 600 que sobrescribían Bootstrap y NO están en el template.
Solución: ELIMINAR completamente estos estilos globales.
Template RDash usa SOLO estilos Bootstrap default para headings.
NO tiene custom CSS para h1-h6 globales.
Esto restaura el comportamiento correcto de Bootstrap:
- h6 font-weight: 500 (no 600)
- Usa font-family de Bootstrap (no custom)
Issue: #128🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Problema: Los estilos globales h1-h6 (líneas 110-123) sobrescribían
Bootstrap, causando que .contact-info h6 tuviera font-weight: 600 en
lugar de 500 (Bootstrap default).
Solución: Agregar reglas específicas para .contact-info h6 y .text-muted
que restauren los valores de Bootstrap usando !important para override.
Valores Bootstrap restaurados:
- h6: font-weight: 500, line-height: 1.2, inherit font-family
- .text-muted: inherit font-size
Issue: #128🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Eliminados todos los overrides de .contact-info h6 y .text-muted para
usar SOLO estilos default de Bootstrap 5, tal como lo hace el template.
Archivos modificados:
- footer-contact.css: Eliminado font-weight: 600 y font-size de h6
- footer.css: Eliminado font-weight: 400 de h6
- style.css: Eliminado font-weight: 400 de h6
Motivo: Template usa Bootstrap puro sin custom CSS para estos elementos.
Issue: #128🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
PROBLEMA RAÍZ:
El sistema tenía DOS funciones cargando style.css:
1. inc/enqueue-scripts.php → apus_enqueue_main_stylesheet() (prioridad 5) ✓
2. functions.php → apus_enqueue_scripts() (prioridad 10) ✗ DUPLICADO
Además, footer.css contenía estilos para un footer tradicional de
WordPress con widgets, NO los estilos del template RDash.
SOLUCIÓN APLICADA:
1. functions.php:
- ELIMINADA función duplicada apus_enqueue_scripts()
- Dejado solo el sistema modular de inc/enqueue-scripts.php
- Documentado por qué se eliminó
2. footer.css:
- REEMPLAZADO completamente con estilos del template RDash
- footer { background-color: var(--color-navy-dark); }
- footer h5, footer a, footer .btn-primary con colores correctos
- .contact-info h6 { font-weight: 400; } para labels normales
- .contact-info i con color naranja
3. style.css:
- Agregados estilos .contact-info (líneas 1267-1275)
- Reforzados por footer.css para garantizar aplicación
RESULTADO:
- Footer con fondo negro oscuro correcto (no gris claro)
- Labels de contacto con peso normal (no bold)
- Iconos de contacto con color naranja
- Un solo archivo style.css cargado (no duplicado)
Referencia: Template líneas 1093-1151 (footer + contact section)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
El CSS del tema NO se estaba cargando porque functions.php apuntaba
al style.css raíz (que solo tiene headers de WordPress) en vez del
archivo real en assets/css/style.css.
Cambios realizados:
1. functions.php: Cambiar get_stylesheet_uri() a ruta correcta
- Ahora carga assets/css/style.css con todos los estilos del tema
- Esto activa los estilos de footer (bg-dark override, colores, etc)
2. style.css: Agregar estilos faltantes de .contact-info
- .contact-info i { color: var(--color-orange-primary); }
- .contact-info h6 { font-weight: 400; } para labels normales
Esto corrige:
- Footer con fondo gris claro → Ahora fondo negro oscuro correcto
- Labels de contacto en bold → Ahora peso normal como template
- Icons de contacto sin color → Ahora color naranja correcto
Referencia: Template líneas 991-1025 (footer y contact-info CSS)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Problema:
Las variables CSS --color-neutral-* estaban siendo usadas en los estilos
de formularios y otros componentes, pero no estaban definidas en :root,
causando que los estilos no se aplicaran correctamente.
Solución:
Agregadas 4 variables CSS neutrales al :root en style.css:
- --color-neutral-50: #f9fafb (backgrounds claros)
- --color-neutral-100: #e9ecef (borders de form-control)
- --color-neutral-600: #6c757d (textos secundarios)
- --color-neutral-700: #495057 (textos/backgrounds oscuros)
Estas variables son necesarias para que los estilos del componente
Footer Contact Form se rendericen correctamente según la documentación.
Archivos modificados:
- wp-content/themes/apus-theme/assets/css/style.css (líneas 57-61)
Related to #128🤖 Generated with Claude Code
- Eliminar pre-footer complejo que no existe en template
- Eliminar WordPress dynamic sidebars
- Agregar 3 columnas de navegación estáticas (Recursos, Soporte, Empresa)
- Agregar formulario de newsletter con 5 campos en columna offset
- Mantener copyright con año dinámico y redes sociales
- Agregar CSS para footer en style.css (líneas 1181-1259)
- Estructura replica template líneas 1093-1151
Refs: #128🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
PROBLEMA DIAGNOSTICADO:
- Botones de paginación se veían azules en staging
- Agregué CSS a style.css pero existe pagination.css separado
- pagination.css se carga DESPUÉS y sobreescribía con colores Bootstrap azules
SOLUCIÓN IMPLEMENTADA:
- Editar pagination.css directamente (archivo específico de paginación)
- Reemplazar TODOS los #0d6efd (azul Bootstrap) con var(--color-orange-primary)
- Actualizar gradientes azules a naranja sólido
- Actualizar rgba de box-shadows (de azul a naranja)
- Incluye estilos para hover, focus, active y dark mode
ARCHIVOS MODIFICADOS:
- wp-content/themes/apus-theme/assets/css/pagination.css
* Línea 37: color hover naranja
* Línea 38-39: background y border hover naranja
* Línea 41: box-shadow naranja
* Línea 46-48: focus naranja
* Línea 50: box-shadow focus naranja
* Línea 56-57: active background naranja (sin gradiente)
* Línea 59: box-shadow active naranja
* Línea 64: active hover background light orange
* Línea 66: box-shadow active hover naranja
* Línea 185: dark mode border naranja
* Línea 189: dark mode active naranja
VALIDACIÓN:
- ✅ Diagnosticado con Playwright (network requests)
- ✅ Identificado orden de carga: style.css → pagination.css
- ✅ Documentado en Issue #127
Referencias: Issue #127🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Agregar estilos de paginación (líneas 1157-1179)
- Botones normales: gris oscuro
- Botones hover: naranja con fondo transparente 10%
- Botón activo: naranja sólido
- Problema identificado con MCP Playwright
- Causa raíz: Documentación incompleta (faltaba CSS del template original)
- CSS verificado con MCP Serena en línea 1157
Referencias: Issue #127🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Implementar estilos completos en style.css (líneas 1111-1155)
- Border izquierdo visual indicator (gris → naranja hover)
- Cards altura uniforme con height 100%
- Uso estratégico de !important para override de Bootstrap
- Cursor pointer y transiciones suaves
- HTML ya existía en single.php (sin cambios)
Referencias: Issue #127🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
PROBLEMA ROOT CAUSE FINAL:
theme.css tenía MÚLTIPLES reglas sobrescribiendo Bootstrap:
- .btn y button (background-color global)
- .btn:focus, button:focus (box-shadow)
- .btn:disabled, button:disabled (opacity)
- .btn-secondary, .btn-success, .btn-danger, etc. (colores)
- .btn-sm, .btn-lg (tamaños)
TODAS estas reglas sobrescribían btn-outline de Bootstrap
SOLUCIÓN DEFINITIVA:
- ELIMINADAS todas las reglas globales .btn y button
- ELIMINADAS todas las variantes .btn-*
- ELIMINADOS tamaños .btn-sm y .btn-lg
- Mantener SOLO estilos para inputs SIN clases btn
- Bootstrap maneja TODO lo relacionado con botones
Archivos modificados:
- assets/css/theme.css (eliminadas ~80 líneas de CSS)
RESULTADO:
Bootstrap btn-outline-* funciona SIN interferencia
Fixes#124🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
PROBLEMA ROOT CAUSE:
theme.css aplicaba background-color a TODOS los .btn (línea 335)
Esto sobrescribía btn-outline-* de Bootstrap
ANÁLISIS:
- Template original NO tiene theme.css
- theme.css es archivo adicional con reglas conflictivas
- Reglas globales .btn y button sobrescriben Bootstrap
SOLUCIÓN:
- Eliminar selectores button y .btn de theme.css
- Mantener SOLO estilos para inputs SIN clases Bootstrap
- Usar :not([class*="btn"]) para excluir elementos con clases btn
RESULTADO:
- Bootstrap maneja btn-outline correctamente
- Sin conflictos de especificidad CSS
- Inputs sin clases mantienen estilos por defecto
Archivo modificado:
- assets/css/theme.css (líneas 316-348)
Fixes#124🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
PROBLEMA:
- social-share.css se estaba cargando con CSS adicional no documentado
- custom-style.css tenía reglas duplicadas
- Múltiples archivos CSS causaban conflictos
SOLUCIÓN:
- Deshabilitado enqueue de social-share.css en enqueue-scripts.php
- Eliminado CSS duplicado de custom-style.css
- Mantener SOLO las 2 reglas en style.css según documentación
Archivos modificados:
- inc/enqueue-scripts.php (deshabilitado líneas 398-416)
- assets/css/custom-style.css (eliminado líneas 659-666)
Según: theme-documentation/13-componente-share-buttons/CSS-ESPECIFICO.md
Solo debe haber 2 reglas CSS + Bootstrap outline classes
Fixes#124🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
PROBLEMA:
- Los botones de compartir se mostraban con fondo azul sólido en lugar de outline
- theme.css aplicaba background-color: var(--primary-color) a TODOS los .btn
SOLUCIÓN:
- Modificar selector en theme.css para excluir botones con "outline" en clase
- Usar :not([class*="outline"]) para preservar estilos Bootstrap outline
Fixes#124🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
CAMBIOS EN HTML (single.php):
- Remover botón de Email (no en documentación)
- Remover texto de botones (solo iconos)
- Agregar aria-label a todos los botones para accesibilidad
- Cambiar Instagram a onclick alert en vez de link directo
- Cambiar WhatsApp URL a api.whatsapp.com/send
- Actualizar rel de "noopener" a "noopener noreferrer"
- Agregar comentarios HTML para cada botón
CAMBIOS EN CSS (style.css):
- Agregar reglas específicas para .share-buttons .btn
- border-width: 2px (más grueso que Bootstrap default)
- transition: all 0.3s ease
- box-shadow en hover para efecto de elevación
Archivos modificados:
- wp-content/themes/apus-theme/single.php (líneas 72-120)
- wp-content/themes/apus-theme/assets/css/style.css (líneas 1054-1063)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
PROBLEMA:
- get_template_part no cargaba el archivo content-cta-box.php
SOLUCIÓN TEMPORAL:
- HTML del CTA Box colocado directamente en single.php
- Eliminado get_template_part para debugging
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
PROBLEMA:
- CTA Box no aparecía en el sidebar debajo del TOC
- El archivo content-cta-box.php tenía condición if (!is_single()) return
- Esta condición impedía el renderizado del CTA Box
SOLUCIÓN:
- Eliminada la condición is_single() del archivo
- El CTA Box ahora se renderiza correctamente
- Ya que se llama desde single.php, no necesita validación adicional
ARCHIVO MODIFICADO:
- template-parts/content-cta-box.php (eliminadas líneas 12-15)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- CREAR: template-parts/content-toc.php
* Función PHP apu_generate_toc() para generar TOC automáticamente
* Regex para buscar H2 con atributo ID
* Solo se muestra en is_single()
- MODIFICAR: single.php (sidebar)
* Agregar div.sidebar-sticky wrapper
* Integrar get_template_part('template-parts/content', 'toc')
* Preparar espacio para CTA Box (componente 12)
- MODIFICAR: style.css (+87 líneas)
* 9 selectores CSS + 4 pseudo-elementos scrollbar
* Sticky positioning (top: 85px)
* Max-height calculado con calc()
* Scroll interno con overflow-y: auto
* Min-height: 0 (crítico para scroll en flexbox)
* Border-left indicator (navy, NO naranja)
* Scrollbar personalizado 6px (solo Webkit)
- MODIFICAR: main.js (+66 líneas)
* Función updateActiveSection() para ScrollSpy
* Algoritmo SIMPLE: verifica si pasaste el top
* Offset scroll: navbarHeight + 100
* Smooth scroll: navbarHeight + 40
* Selector .toc-container a (NO .toc-link)
* NO tiene auto-scroll del TOC
* NO actualiza URL con history.pushState()
Características:
✅ Generación automática desde H2 con ID
✅ ScrollSpy custom (JavaScript vanilla, NO Bootstrap)
✅ Sticky positioning con flexbox
✅ Scroll interno solo en lista
✅ Border-left indicator activo
✅ Scrollbar delgado personalizado
Selectores REALES usados:
- .toc-container a (NO .toc-link)
- .toc-container h4 (NO .toc-title)
- .toc-container li (NO .toc-list li)
🎨 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
- Cambiar <div> a <article> para mejor semántica HTML
- Agregar CSS completo con 9 selectores:
* .post-content: Contenedor con fondo, padding, shadow
* .post-content h2: Border-bottom naranja 3px
* .post-content h3: Color navy light para jerarquía
* .post-content p: Line-height 1.8 para legibilidad
* .post-content ul/ol: Listas estilizadas
* .post-content li: Items con espaciado
* .post-content strong: Color navy para destacar
* .post-content a: Enlaces naranjas con underline
* .post-content a:hover: Hover naranja oscuro
Archivos modificados:
- wp-content/themes/apus-theme/single.php (líneas 61, 70)
- wp-content/themes/apus-theme/assets/css/style.css (líneas 865-921)
🎨 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
PROBLEMA RAÍZ IDENTIFICADO:
- WordPress 6.3+ agrega automáticamente defer a scripts en footer con dependencias
- wp_localize_script NO funciona con scripts diferidos
- apusTheme nunca se inyecta en HTML
- main.js usa ruta incorrecta para modal: fetch('modal-contact.html')
- WordPress devuelve página 404 completa
- Se inserta en modalContainer duplicando TODO el sitio
SOLUCIÓN:
1. Agregar filtro script_loader_tag con prioridad 20
2. Remover atributos defer y data-wp-strategy de apus-main-js
3. Esto permite que wp_localize_script inyecte apusTheme
4. main.js ahora puede usar apusTheme.themeUrl correctamente
ARCHIVOS:
- wp-content/themes/apus-theme/inc/enqueue-scripts.php:214-227 (nuevo filtro)
- wp-content/themes/apus-theme/inc/enqueue-scripts.php:197 (versión 1.0.3)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
PROBLEMA:
- wp_localize_script no genera variable apusTheme en HTML
- WordPress no puede inyectar scripts inline cuando se usa strategy => 'defer'
- Resultado: JavaScript no tiene acceso a apusTheme.themeUrl
- fetch() usa ruta incorrecta y carga página 404 en modalContainer
SOLUCIÓN:
- Quitar strategy => 'defer' de wp_enqueue_script
- Usar solo 'true' (in_footer => true) como 5to parámetro
- Incrementar versión a 1.0.2 para cache busting
- Ahora wp_localize_script SÍ inyecta apusTheme correctamente
REFERENCIA:
- https://developer.wordpress.org/reference/functions/wp_localize_script/
- wp_localize_script requiere que script NO use defer/async
ARCHIVO:
- wp-content/themes/apus-theme/inc/enqueue-scripts.php:193-199
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
PROBLEMA:
- Navegadores tienen main.js en caché con código viejo
- fetch('modal-contact.html') con ruta incorrecta sigue ejecutándose
- Página 404 se inserta en modalContainer duplicando todo el template
SOLUCIÓN:
- Cambiar versión de main.js de 1.0.0 a 1.0.1
- Fuerza recarga del JS con fix de modalUrl correcto
ARCHIVO:
- wp-content/themes/apus-theme/inc/enqueue-scripts.php:197
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
PROBLEMA:
- Footer se renderizaba duplicado con página 404 entre las duplicaciones
- main.js cargaba 'modal-contact.html' con ruta relativa incorrecta
- fetch('modal-contact.html') resolvía a URL base en vez de directorio del tema
- WordPress devolvía página 404 completa que se insertaba en #modalContainer
SOLUCIÓN:
1. Agregar wp_localize_script en enqueue-scripts.php para pasar themeUrl a JS
2. Corregir main.js para usar apusTheme.themeUrl + '/modal-contact.html'
3. Agregar fallback a '/wp-content/themes/apus-theme/modal-contact.html'
ARCHIVOS:
- wp-content/themes/apus-theme/inc/enqueue-scripts.php:204-212
- wp-content/themes/apus-theme/assets/js/main.js:59-62
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
PROBLEMA:
- hero.css y badges.css tenían estilos de .category-badge-hero que NO existen en template
- Estos archivos sobrescribían los estilos correctos de style.css
- Template original SOLO tiene .category-badge en style.css, NO tiene clase -hero
ARCHIVOS AFECTADOS:
1. badges.css - VACIADO COMPLETO:
- Eliminado .category-badge (líneas 15-38) - duplicado, NO en template
- Eliminado .category-badge-hero (líneas 41-56) - NO existe en template
- Eliminado responsive (líneas 59-68) - duplicado
- Total: 58 líneas eliminadas
2. hero.css - VACIADO COMPLETO:
- Eliminado .category-badge-hero (líneas 16-31) - NO existe en template
- Eliminado hover (líneas 33-38) - NO en template
- Eliminado i (líneas 40-42) - NO en template
- Eliminado responsive (líneas 45-50) - NO en template
- Total: 40 líneas eliminadas
ESTILOS CORRECTOS:
Todos los estilos del hero section y badges están en style.css líneas 812-848
según template original apus-theme-template/css/style.css líneas 186-222
TEMPLATE ORIGINAL SOLO TIENE:
- .hero-title
- .hero-title h1
- .category-badge
- .category-badge:hover
- .category-badge i
NO TIENE clase .category-badge-hero específica.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
PROBLEMA CRÍTICO ENCONTRADO:
El archivo hero-section.css (Issue #40, prioridad 20) tenía OTRA definición
de .hero-title con margin: 1rem 0; que causaba 16px de espacio entre navbar y hero.
Como se cargaba DESPUÉS de style.css (prioridad 5), sobrescribía los estilos
y agregaba el margin no deseado.
CAMBIOS:
- Eliminado .hero-title completo (líneas 30-37) incluyendo margin: 1rem 0
- Eliminado .hero-title del @media responsive (líneas 57-59)
- Mantenido solo .hero-meta, .hero-category-badge, etc.
RESUMEN DE DUPLICACIONES ELIMINADAS:
1. hero.css - .hero-title eliminado ✓
2. custom-style.css - .hero-title eliminado ✓
3. hero-section.css - .hero-title eliminado ✓
AHORA .hero-title solo existe UNA VEZ en style.css como debe ser.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
PROBLEMA RAÍZ:
- .hero-title estaba definido en 4 archivos diferentes (style.css, hero.css, custom-style.css)
- Había propiedades incorrectas agregadas (margin-bottom: 0 en .navbar, margin-top: 0 en .hero-title)
- Estas propiedades NO existen en el template original
CAMBIOS REALIZADOS:
1. hero.css:
- Eliminado .hero-title completo (líneas 15-24)
- Eliminado .hero-title del media query responsive (líneas 57-64)
- Mantenido solo .category-badge-hero y su responsive
2. custom-style.css:
- Eliminado .hero-title completo (líneas 88-92)
- Eliminado .hero-title h1 (líneas 94-100)
- Eliminado .category-badge (líneas 102-124)
- Dejado comentario indicando que CSS está en style.css
3. style.css:
- Eliminado margin-bottom: 0 de .navbar (línea 696)
- Eliminado margin-top: 0 de .hero-title (línea 817)
RESULTADO:
- .hero-title ahora solo está definido UNA VEZ en style.css
- CSS coincide EXACTAMENTE con el template original
- Sin propiedades extras que no existen en template
- Sin duplicaciones de código
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
CAMBIOS IMPLEMENTADOS:
1. HTML en single.php (líneas 53-58):
- Cambiar contenedor de 'mb-4' a 'featured-image-container my-4'
- Cambiar tamaño de imagen de 'large' a 'full' (calidad completa)
- Simplificar clases de imagen: solo 'img-fluid' (sin w-100 ni rounded)
- Agregar atributo 'loading' => 'lazy' para lazy loading nativo
2. CSS en style.css (líneas 852-865):
- Agregar estilos completos del componente Featured Image
- Border radius: 12px en contenedor
- Box shadow: 0 8px 24px rgba(0, 0, 0, 0.1)
- Overflow hidden: CRÍTICO para que border-radius funcione
- Display block en img: elimina espacio extra de 4px
- Margin: 2rem vertical para separación
ESPECIFICACIONES TÉCNICAS:
- CSS aplicado en contenedor (más eficiente que en img)
- Overflow hidden asegura que border-radius funcione correctamente
- Display block elimina espacio inline predeterminado del navegador
- Lazy loading mejora performance (carga solo al hacer scroll)
- Tamaño 'full' muestra imagen en calidad original
DOCUMENTACIÓN SEGUIDA:
- theme-documentation/09-componente-featured-image/COMPONENTE-FEATURED-IMAGE.md
- theme-documentation/09-componente-featured-image/CSS-ESPECIFICO.md
Fixes#110🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
PROBLEMA:
Existía un gap/espacio visible entre el navbar y el hero section.
CAMBIOS:
1. header.php (línea 88):
- Eliminada línea en blanco después de </nav>
- HTML ahora termina directamente sin saltos extra
2. style.css - .navbar (línea 696):
- Agregado margin-bottom: 0
- Asegura que navbar no tenga margen inferior
3. style.css - .hero-title (línea 816):
- Agregado margin-top: 0
- Asegura que hero no tenga margen superior
RESULTADO:
✓ Navbar y hero section pegados sin espacio
✓ Diseño limpio y continuo
✓ Sticky navbar sigue funcionando
Fixes#108🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
PROBLEMA:
Submenu "Buscador General de Precios Unitarios" tiene 18 elementos
y se oculta fuera de la pantalla, haciendo inaccesibles los últimos.
CAMBIOS:
1. Reducir padding vertical de .dropdown-item (0.625rem → 0.5rem)
- Ahorra ~64px total con 18 elementos
- Elementos más compactos visualmente
2. Agregar max-height: 70vh a .dropdown-menu
- Permite ver ~10-12 elementos simultáneamente
- Todos los 18 elementos accesibles mediante scroll
3. Activar overflow-y: auto
- Scroll vertical aparece automáticamente si necesario
- Solo cuando contenido excede 70vh
4. Mejorar UX del scroll
- scroll-behavior: smooth (scroll suave)
- Scrollbar personalizado (6px, color gris)
- scrollbar-width: thin (Firefox)
- Custom webkit scrollbar (Chrome, Safari, Edge)
RESULTADO:
✅ Todos los 18 elementos del submenu son accesibles
✅ Scroll vertical suave y con estilo personalizado
✅ Elementos más compactos pero legibles
✅ Funciona en todos los navegadores modernos
Fixes#103🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
RAZÓN:
La función apus_remove_query_strings_from_static_resources()
es una práctica obsoleta de hace 10+ años que causaba más
problemas que beneficios.
PROBLEMAS QUE CAUSABA:
- Impedía cache busting de WordPress (filemtime(), versiones)
- Usuarios quedaban con CSS/JS desactualizado después de updates
- Causó que el botón Let's Talk se viera azul en lugar de naranja
POR QUÉ ES OBSOLETA:
- CDNs modernos (Cloudflare, AWS, Fastly) cachean con query strings
- WordPress depende de query strings para versionado correcto
- Google PageSpeed ya no lo recomienda desde hace años
- HTTP/2 hace irrelevante esta "optimización"
RESULTADO:
Ahora WordPress puede usar query strings correctamente para
asegurar que usuarios descarguen versiones actualizadas de CSS/JS.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
PROBLEMA RAÍZ ENCONTRADO:
La función apus_remove_query_strings_from_static_resources()
estaba eliminando TODOS los query strings (?ver=X.X.X) de los CSS,
incluyendo el style.css principal.
Esto impedía que los navegadores descargaran nuevas versiones del CSS
cuando se hacían cambios, causando que el botón Let's Talk siguiera
mostrándose azul en lugar de naranja.
SOLUCIÓN:
Modificar la función para que NO elimine el query string del
/assets/css/style.css, permitiendo cache busting cuando se actualiza.
Los demás archivos CSS siguen sin query string para mejor cache.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Servidor confirmado sirviendo CSS correcto con !important.
Perfmatters MU plugin desactivado.
Todos los caches limpiados.
CSS descargado directamente del servidor tiene !important correcto.
El problema es browser cache del usuario final.
Incrementando versión a 1.0.3 para forzar descarga.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Caches limpiados:
- W3 Total Cache (page cache + minify)
- Perfmatters cache
- PHP OPcache
- Browser cache (via version bump)
Esto forzará descarga del CSS con !important para botón naranja.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Se cambió el version number del enqueue de style.css de filemtime()
dinámico a '1.0.1' hardcoded para bypass-ear todos los caches
(Memcached, OPcache, browser) que están sirviendo CSS sin !important.
Esto fuerza a todos los navegadores a descargar el CSS actualizado
que tiene el !important necesario para el botón naranja.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
