From a21cd33d6fa43b4f56e567f9298ae813741bcf2c Mon Sep 17 00:00:00 2001
From: FrankZamora <prime.leads.app@gmail.com>
Date: Thu, 6 Nov 2025 20:53:45 -0600
Subject: [PATCH] [Issue #105] Implementar CSS del Hero Section con
 glassmorphism
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

HTML ya estaba implementado en single.php (líneas 17-44).
Solo faltaba agregar el CSS en style.css.

CAMBIOS:
- Agregado CSS del Hero Section (42 líneas)
- Comentario separador /* === HERO SECTION === */
- .hero-title con gradiente navy diagonal (135deg)
- .hero-title con box-shadow para profundidad
- .hero-title h1 con text-shadow para legibilidad
- .category-badge con efecto glassmorphism (backdrop-filter: blur)
- .category-badge con semi-transparencia rgba(255, 255, 255, 0.15)
- .category-badge:hover cambia a naranja semi-transparente
- .category-badge i con color naranja claro

ESTILOS GLASSMORPHISM:
- backdrop-filter: blur(10px) - efecto vidrio esmerilado
- background: rgba(255, 255, 255, 0.15) - semi-transparente
- border: 1px solid rgba(255, 255, 255, 0.2)
- Compatible con Chrome 76+, Safari 9+, Edge 79+

GRADIENTE NAVY:
- linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%)
- Diagonal arriba-izquierda → abajo-derecha
- Transición suave entre navy primary y light

Código fuente: CSS-ESPECIFICO.md líneas 58-98

Fixes #105

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../themes/apus-theme/assets/css/style.css    | 40 +++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/wp-content/themes/apus-theme/assets/css/style.css b/wp-content/themes/apus-theme/assets/css/style.css
index 969a5067..71e0d18b 100644
--- a/wp-content/themes/apus-theme/assets/css/style.css
+++ b/wp-content/themes/apus-theme/assets/css/style.css
@@ -806,3 +806,43 @@ img {
 .btn-lets-talk i {
     color: #ffffff;
 }
+
+/* === HERO SECTION === */
+
+.hero-title {
+    background: linear-gradient(135deg, var(--color-navy-primary) 0%, var(--color-navy-light) 100%);
+    box-shadow: 0 4px 16px rgba(30, 58, 95, 0.25);
+    padding: 3rem 0;
+}
+
+.hero-title h1 {
+    color: #ffffff !important;
+    font-weight: 700;
+    line-height: 1.4;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
+    margin-bottom: 0;
+}
+
+.category-badge {
+    background: rgba(255, 255, 255, 0.15);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    color: rgba(255, 255, 255, 0.95);
+    padding: 0.375rem 0.875rem;
+    border-radius: 20px;
+    font-size: 0.813rem;
+    font-weight: 500;
+    text-decoration: none;
+    display: inline-block;
+    transition: all 0.3s ease;
+}
+
+.category-badge:hover {
+    background: rgba(255, 133, 0, 0.2);
+    border-color: rgba(255, 133, 0, 0.4);
+    color: #ffffff;
+}
+
+.category-badge i {
+    color: var(--color-orange-light);
+}