[COMPONENTE 09] Implementar Featured Image con border-radius y lazy loading - Issue #110

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>

wp-content/themes/apus-theme/assets/css/style.css

@@ -848,3 +848,18 @@ img {
 .category-badge i {
     color: var(--color-orange-light);
 }
+
+/* === FEATURED IMAGE === */
+
+.featured-image-container {
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+    margin: 2rem 0;
+}
+
+.featured-image-container img {
+    width: 100%;
+    height: auto;
+    display: block;
+}

wp-content/themes/apus-theme/single.php

@@ -52,8 +52,8 @@ get_header();
 
 			<!-- Featured Image -->
 			<?php if (has_post_thumbnail()) : ?>
-				<div class="mb-4">
-					<?php the_post_thumbnail('large', array('class' => 'img-fluid w-100 rounded')); ?>
+				<div class="featured-image-container my-4">
+					<?php the_post_thumbnail('full', array('class' => 'img-fluid', 'loading' => 'lazy')); ?>
 				</div>
 			<?php endif; ?>