fix(theme): improve post-grid spacing, pagination and archive templates

- Fix flexbox gap issue causing unequal horizontal/vertical spacing
- Reset Bootstrap row/col margins to use only CSS gap property
- Replace WordPress pagination with Bootstrap-style pagination
- Add cta-post component to category.php and archive.php templates
- Fix spacing controls UI with separate horizontal/vertical gap fields
- Update FieldMapper with new gap_horizontal and gap_vertical attributes

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Public/PostGrid/Infrastructure/Ui/PostGridRenderer.php

@@ -152,10 +152,11 @@ final class PostGridRenderer implements RendererInterface
         $paginationActiveColor = $colors['pagination_active_color'] ?? '#ffffff';
 
         // Spacing
-        $gridGap = $spacing['grid_gap'] ?? '1.5rem';
-        $cardPadding = $spacing['card_padding'] ?? '1.25rem';
-        $sectionMarginTop = $spacing['section_margin_top'] ?? '0';
-        $sectionMarginBottom = $spacing['section_margin_bottom'] ?? '2rem';
+        $gapHorizontal = $spacing['gap_horizontal'] ?? '24px';
+        $gapVertical = $spacing['gap_vertical'] ?? '24px';
+        $cardPadding = $spacing['card_padding'] ?? '20px';
+        $sectionMarginTop = $spacing['section_margin_top'] ?? '0px';
+        $sectionMarginBottom = $spacing['section_margin_bottom'] ?? '32px';
 
         // Visual effects
         $cardBorderRadius = $effects['card_border_radius'] ?? '0.5rem';
@@ -176,13 +177,23 @@ final class PostGridRenderer implements RendererInterface
             'margin-bottom' => $sectionMarginBottom,
         ]);
 
-        // Row gap
-        $cssRules[] = $this->cssGenerator->generate('.post-grid .row', [
-            'gap' => $gridGap,
-            'row-gap' => $gridGap,
-        ]);
+        // Row: usar display flex con gap, quitar margins/paddings de Bootstrap
+        $cssRules[] = ".post-grid .row {
+            display: flex;
+            flex-wrap: wrap;
+            column-gap: {$gapHorizontal};
+            row-gap: {$gapVertical};
+            margin: 0;
+            padding: 0;
+        }";
 
-        // Card base
+        // Columnas: quitar padding de Bootstrap y margin-bottom
+        $cssRules[] = ".post-grid .post-card-col {
+            padding: 0;
+            margin: 0;
+        }";
+
+        // Card base - sin margin extra
         $cssRules[] = ".post-grid .card {
             background: {$cardBgColor};
             border: 1px solid {$cardBorderColor};
@@ -191,6 +202,7 @@ final class PostGridRenderer implements RendererInterface
             transition: {$cardTransition};
             height: 100%;
             overflow: hidden;
+            margin: 0;
         }";
 
         // Card hover
@@ -318,8 +330,8 @@ final class PostGridRenderer implements RendererInterface
         $colsTablet = $layout['columns_tablet'] ?? '2';
         $colsMobile = $layout['columns_mobile'] ?? '1';
 
-        // Mobile
-        $mobileWidth = $this->getColumnWidth($colsMobile);
+        // Mobile (1 col = no gap needed)
+        $mobileWidth = $this->getColumnWidth($colsMobile, $gapHorizontal);
         $cssRules[] = "@media (max-width: 575.98px) {
             .post-grid .post-card-col {
                 flex: 0 0 {$mobileWidth};
@@ -328,7 +340,7 @@ final class PostGridRenderer implements RendererInterface
         }";
 
         // Tablet
-        $tabletWidth = $this->getColumnWidth($colsTablet);
+        $tabletWidth = $this->getColumnWidth($colsTablet, $gapHorizontal);
         $cssRules[] = "@media (min-width: 576px) and (max-width: 991.98px) {
             .post-grid .post-card-col {
                 flex: 0 0 {$tabletWidth};
@@ -337,7 +349,7 @@ final class PostGridRenderer implements RendererInterface
         }";
 
         // Desktop
-        $desktopWidth = $this->getColumnWidth($colsDesktop);
+        $desktopWidth = $this->getColumnWidth($colsDesktop, $gapHorizontal);
         $cssRules[] = "@media (min-width: 992px) {
             .post-grid .post-card-col {
                 flex: 0 0 {$desktopWidth};
@@ -348,14 +360,33 @@ final class PostGridRenderer implements RendererInterface
         return implode("\n", $cssRules);
     }
 
-    private function getColumnWidth(string $cols): string
+    /**
+     * Calcula el ancho de columna considerando el gap
+     *
+     * Con gap en flexbox, el ancho debe ser:
+     * (100% - (n-1)*gap) / n
+     *
+     * @param string $cols Número de columnas
+     * @param string $gap Valor del gap (ej: '1.5rem', '24px')
+     * @return string Valor CSS con calc() si hay gap
+     */
+    private function getColumnWidth(string $cols, string $gap): string
     {
         $colCount = (int)$cols;
         if ($colCount <= 0) {
             $colCount = 1;
         }
-        $percentage = 100 / $colCount;
-        return sprintf('%.4f%%', $percentage);
+
+        // Si es 1 columna, no hay gap entre columnas
+        if ($colCount === 1) {
+            return '100%';
+        }
+
+        // Número de gaps = columnas - 1
+        $gapCount = $colCount - 1;
+
+        // calc((100% - (n-1)*gap) / n)
+        return sprintf('calc((100%% - %d * %s) / %d)', $gapCount, $gap, $colCount);
     }
 
     private function buildHTML(array $data, string $visibilityClass): string
@@ -558,15 +589,63 @@ final class PostGridRenderer implements RendererInterface
 
     private function buildPaginationHTML(): string
     {
-        ob_start();
+        global $wp_query;
 
-        the_posts_pagination([
-            'mid_size' => 2,
-            'prev_text' => __('&laquo; Anterior', 'roi-theme'),
-            'next_text' => __('Siguiente &raquo;', 'roi-theme'),
-            'screen_reader_text' => __('Navegacion de publicaciones', 'roi-theme'),
-        ]);
+        $totalPages = $wp_query->max_num_pages;
+        if ($totalPages <= 1) {
+            return '';
+        }
 
-        return ob_get_clean();
+        $currentPage = max(1, get_query_var('paged', 1));
+        $html = '<nav aria-label="Paginacion"><ul class="pagination justify-content-center">';
+
+        // Boton Inicio (siempre visible)
+        $html .= sprintf(
+            '<li class="page-item"><a class="page-link" href="%s">Inicio</a></li>',
+            esc_url(get_pagenum_link(1))
+        );
+
+        // Numeros de pagina - mostrar 5 paginas
+        $visiblePages = 5;
+        $start = max(1, $currentPage - 2);
+        $end = min($totalPages, $start + $visiblePages - 1);
+
+        // Ajustar inicio si estamos cerca del final
+        if ($end - $start < $visiblePages - 1) {
+            $start = max(1, $end - $visiblePages + 1);
+        }
+
+        for ($i = $start; $i <= $end; $i++) {
+            if ($i === $currentPage) {
+                $html .= sprintf(
+                    '<li class="page-item active"><span class="page-link">%d</span></li>',
+                    $i
+                );
+            } else {
+                $html .= sprintf(
+                    '<li class="page-item"><a class="page-link" href="%s">%d</a></li>',
+                    esc_url(get_pagenum_link($i)),
+                    $i
+                );
+            }
+        }
+
+        // Ver mas (siguiente pagina)
+        if ($currentPage < $totalPages) {
+            $html .= sprintf(
+                '<li class="page-item"><a class="page-link" href="%s">Ver mas</a></li>',
+                esc_url(get_pagenum_link($currentPage + 1))
+            );
+        }
+
+        // Boton Fin (siempre visible)
+        $html .= sprintf(
+            '<li class="page-item"><a class="page-link" href="%s">Fin</a></li>',
+            esc_url(get_pagenum_link($totalPages))
+        );
+
+        $html .= '</ul></nav>';
+
+        return $html;
     }
 }