'; $html .= '

'; $html .= $this->buildVisibilityGroup($componentId); $html .= $this->buildContentGroup($componentId); $html .= $this->buildEffectsGroup($componentId); $html .= '

'; $html .= '

'; $html .= $this->buildColorsGroup($componentId); $html .= $this->buildTypographyGroup($componentId); $html .= $this->buildSpacingGroup($componentId); $html .= '

'; $html .= '

renderer->getFieldValue($componentId, 'visibility', 'is_enabled', true); $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' '; $html .= ' '; $html .= ' Activar Hero Section'; $html .= ' '; $html .= '

'; $html .= '

'; $showOnDesktop = $this->renderer->getFieldValue($componentId, 'visibility', 'show_on_desktop', true); $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' '; $html .= ' '; $html .= ' Mostrar en Desktop'; $html .= ' '; $html .= '

'; $html .= '

'; $showOnMobile = $this->renderer->getFieldValue($componentId, 'visibility', 'show_on_mobile', true); $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' '; $html .= ' '; $html .= ' Mostrar en Mobile'; $html .= ' '; $html .= '

'; $html .= '

'; $showOnPages = $this->renderer->getFieldValue($componentId, 'visibility', 'show_on_pages', 'posts'); $html .= '

'; $html .= ' '; $html .= ' '; $html .= ' Mostrar en'; $html .= ' '; $html .= ' '; $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' Contenido'; $html .= '

'; $showCategories = $this->renderer->getFieldValue($componentId, 'content', 'show_categories', true); $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' '; $html .= ' '; $html .= ' Mostrar badges de categorías'; $html .= ' '; $html .= '

'; $html .= '

'; $showBadgeIcon = $this->renderer->getFieldValue($componentId, 'content', 'show_badge_icon', true); $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' '; $html .= ' '; $html .= ' Mostrar ícono en badges'; $html .= ' '; $html .= '

'; $html .= '

'; $badgeIconClass = $this->renderer->getFieldValue($componentId, 'content', 'badge_icon_class', 'bi-folder-fill'); $html .= '

'; $html .= ' '; $html .= ' '; $html .= ' Clase del ícono de badge'; $html .= ' '; $html .= ' '; $html .= ' Usa clases de Bootstrap Icons'; $html .= '

'; $titleTag = $this->renderer->getFieldValue($componentId, 'content', 'title_tag', 'h1'); $html .= '

'; $html .= ' '; $html .= ' '; $html .= ' Etiqueta HTML del título'; $html .= ' '; $html .= ' '; $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' Colores'; $html .= '

'; $html .= '

'; $gradientStart = $this->renderer->getFieldValue($componentId, 'colors', 'gradient_start', '#1e3a5f'); $html .= $this->buildColorPicker('heroGradientStart', 'Degradado (inicio)', 'circle-half', $gradientStart); $gradientEnd = $this->renderer->getFieldValue($componentId, 'colors', 'gradient_end', '#2c5282'); $html .= $this->buildColorPicker('heroGradientEnd', 'Degradado (fin)', 'circle-fill', $gradientEnd); $titleColor = $this->renderer->getFieldValue($componentId, 'colors', 'title_color', '#FFFFFF'); $html .= $this->buildColorPicker('heroTitleColor', 'Color título', 'fonts', $titleColor); $badgeBgColor = $this->renderer->getFieldValue($componentId, 'colors', 'badge_bg_color', '#FFFFFF'); $html .= $this->buildColorPicker('heroBadgeBgColor', 'Fondo badges', 'badge', $badgeBgColor); $html .= '

'; $html .= '

'; $badgeTextColor = $this->renderer->getFieldValue($componentId, 'colors', 'badge_text_color', '#FFFFFF'); $html .= $this->buildColorPicker('heroBadgeTextColor', 'Texto badges', 'card-text', $badgeTextColor); $badgeIconColor = $this->renderer->getFieldValue($componentId, 'colors', 'badge_icon_color', '#FFB800'); $html .= $this->buildColorPicker('heroBadgeIconColor', 'Ícono badges', 'star-fill', $badgeIconColor); $badgeHoverBg = $this->renderer->getFieldValue($componentId, 'colors', 'badge_hover_bg', '#FF8600'); $html .= $this->buildColorPicker('heroBadgeHoverBg', 'Badges (hover)', 'hand-index', $badgeHoverBg); $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' Tipografía'; $html .= '

'; $html .= '

'; $titleFontSize = $this->renderer->getFieldValue($componentId, 'typography', 'title_font_size', '2.5rem'); $html .= '

'; $html .= ' '; $html .= ' Tamaño desktop'; $html .= ' '; $html .= ' '; $html .= '

'; $titleFontSizeMobile = $this->renderer->getFieldValue($componentId, 'typography', 'title_font_size_mobile', '1.75rem'); $html .= '

'; $html .= ' '; $html .= ' Tamaño mobile'; $html .= ' '; $html .= ' '; $html .= '

'; $html .= '

'; $titleFontWeight = $this->renderer->getFieldValue($componentId, 'typography', 'title_font_weight', '700'); $html .= '

'; $html .= ' '; $html .= ' Peso del título'; $html .= ' '; $html .= ' '; $html .= '

'; $titleLineHeight = $this->renderer->getFieldValue($componentId, 'typography', 'title_line_height', '1.4'); $html .= '

'; $html .= ' '; $html .= ' Altura de línea'; $html .= ' '; $html .= ' '; $html .= '

'; $html .= '

'; $badgeFontSize = $this->renderer->getFieldValue($componentId, 'typography', 'badge_font_size', '0.813rem'); $html .= '

'; $html .= ' '; $html .= ' Tamaño fuente badges'; $html .= ' '; $html .= ' '; $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' Espaciado'; $html .= '

'; $html .= '

'; $paddingVertical = $this->renderer->getFieldValue($componentId, 'spacing', 'padding_vertical', '3rem'); $html .= '

'; $html .= ' '; $html .= ' Padding vertical'; $html .= ' '; $html .= ' '; $html .= '

'; $marginBottom = $this->renderer->getFieldValue($componentId, 'spacing', 'margin_bottom', '1.5rem'); $html .= '

'; $html .= ' '; $html .= ' Margen inferior'; $html .= ' '; $html .= ' '; $html .= '

'; $html .= '

'; $badgePadding = $this->renderer->getFieldValue($componentId, 'spacing', 'badge_padding', '0.375rem 0.875rem'); $html .= '

'; $html .= ' '; $html .= ' Padding badges'; $html .= ' '; $html .= ' '; $html .= '

'; $badgeBorderRadius = $this->renderer->getFieldValue($componentId, 'spacing', 'badge_border_radius', '20px'); $html .= '

'; $html .= ' '; $html .= ' Border radius badges'; $html .= ' '; $html .= ' '; $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' Efectos'; $html .= '

'; $boxShadow = $this->renderer->getFieldValue($componentId, 'visual_effects', 'box_shadow', '0 4px 16px rgba(30, 58, 95, 0.25)'); $html .= '

'; $html .= ' '; $html .= ' Sombra del hero'; $html .= ' '; $html .= ' '; $html .= '

'; $titleTextShadow = $this->renderer->getFieldValue($componentId, 'visual_effects', 'title_text_shadow', '1px 1px 2px rgba(0, 0, 0, 0.2)'); $html .= '

'; $html .= ' '; $html .= ' Sombra del título'; $html .= ' '; $html .= ' '; $html .= '

'; $badgeBackdropBlur = $this->renderer->getFieldValue($componentId, 'visual_effects', 'badge_backdrop_blur', '10px'); $html .= '

'; $html .= ' '; $html .= ' Blur de fondo badges'; $html .= ' '; $html .= ' '; $html .= '

'; $html .= '