holygrail5 1.0.21 → 1.0.23

package/README.md

@@ -45,6 +45,16 @@ Generador de CSS + guía HTML pensado para design systems ligeros: declaras tu `
     - [Contribuir](#contribuir)
   - [15. Licencia](#15-licencia)
   - [Changelog](#changelog)
+    - [v1.0.22 - Junio 2026](#v1022---junio-2026)
+    - [v1.0.21 - Mayo 2026](#v1021---mayo-2026)
+    - [v1.0.20 - Abril 2026](#v1020---abril-2026)
+    - [v1.0.19 - Abril 2026](#v1019---abril-2026)
+    - [v1.0.18 - Abril 2026](#v1018---abril-2026)
+    - [v1.0.17 - Febrero 2026](#v1017---febrero-2026)
+    - [v1.0.16 - Febrero 2026](#v1016---febrero-2026)
+    - [v1.0.15 - Febrero 2026](#v1015---febrero-2026)
+    - [v1.0.14 - Febrero 2026](#v1014---febrero-2026)
+    - [v1.0.13 - Febrero 2026](#v1013---febrero-2026)
     - [v1.0.12 - Diciembre 2024](#v1012---diciembre-2024)
 
 ---
@@ -547,6 +557,68 @@ Usa, adapta y comparte libremente mientras conserves la atribución.
 
 ## Changelog
 
+### v1.0.22 - Junio 2026
+
+- **Seguridad (guía y demos):** se escapan todos los valores del `config.json` al volcarse en la documentación generada (colores, tipografía, font families, variables CSS, helpers, aspect ratios, breakpoints, grid y containers). Evita inyección de HTML/JS al construir con un config no confiable y publicar `dist/index.html`. Nuevo `escapeHtml` centralizado en `src/generators/utils.js`.
+- **Seguridad (dev-server):** `src/dev-server.js` ahora captura URLs malformadas (ya no cae el proceso con `GET /%`), corrige el filtro de path traversal por prefijo y escucha solo en `127.0.0.1`.
+- **Fix:** los reemplazos del `ThemeTransformer` usan replacer de función para no corromper la salida cuando el contenido inyectado contiene `$`.
+- **Fix:** `getPackageVersion()` leía una ruta inexistente y la guía mostraba la versión como vacía; ahora muestra la versión real.
+- **Tests:** nuevo `tests/escaping.test.js` de regresión anti-inyección (suite en 29 tests). El CSS generado (`dist/output.css`, `dist/themes/dutti.css`) no cambia.
+
+### v1.0.21 - Mayo 2026
+
+- Ajustes en `typo-generator`: refinamiento de la generación de tablas tipográficas y casos límite del placeholder `HG_TYPO_TABLE`.
+
+### v1.0.20 - Abril 2026
+
+- Actualización de labels en la guía y demos (etiquetas de utilidades y secciones).
+- Nuevas clases tipográficas y sus estilos asociados (`config.json`, `typo-generator.js`, demo de Dutti).
+
+### v1.0.19 - Abril 2026
+
+- Bump de versión y mantenimiento de `package.json`.
+
+### v1.0.18 - Abril 2026
+
+- Refactor amplio bajo el commit "cambios hg5":
+  - Reorganización de skills (`.claude/skills`, `.cursor/skills/maquetar-holygrail5`) y `.cursorrules`.
+  - Fuentes Suisse Intl y Suisse Works incorporadas en `src/assets/fonts/`.
+  - Documentación nueva en `docs/`: `ANALISIS-ARQUITECTURA.md`, `ANALISIS-DESIGN-SYSTEM.md`, `CHANGELOG-MEJORAS.md`, `ESTRUCTURA-CSS.md`, `GUIA-USO-OTRO-PROYECTO.md`, `SUPERPROMPT.md`.
+  - Ajustes en `asset-manager.js`, `build-orchestrator.js`, `components-generator.js` y `guide-styles.css`.
+- Nueva clase de botón **badge** y documentación asociada en el tema Dutti.
+- Tarjeta de producto y ajustes de `margin-left` y configuración del grid.
+
+### v1.0.17 - Febrero 2026
+
+- Nueva release con limpieza general y consolidación de cambios previos.
+
+### v1.0.16 - Febrero 2026
+
+- Botón **badge** inicial (variantes y estilos personalizados).
+
+### v1.0.15 - Febrero 2026
+
+- Nuevo botón con estilos personalizados (`themes/dutti/_buttons.css`, `dutti-demo.html`).
+
+### v1.0.14 - Febrero 2026
+
+- Limpieza: eliminados estilos duplicados traspasados desde HG2.
+- Mejoras en grids (`Grids`).
+- Cambio del color verde y nuevo skill para estructura de archivos CSS.
+- Ajuste de columnas (`cambios cols`).
+
+### v1.0.13 - Febrero 2026
+
+- Refactor de la guía: ajustes de estilos y estructura (`guide-styles.css`, `html-generator.js`, demo de Dutti).
+- Mejoras en `docs-generator`:
+  - Generación de la cuadrícula de colores con clasificación de primarios y semánticos.
+  - Margen lateral y columnas de gutter en la tabla HTML; configuración de grid actualizada.
+  - Conversión de `fontSize` a px y mejora de la tabla de clases.
+- Nuevos helpers de espaciado con prefijo `hg-` para clases inline y block.
+- **Soporte para ratios de aspecto** en `config.json`, generadores y guía HTML, con tests dedicados; nueva clase para imágenes/vídeos en ratios de aspecto y propiedad `display` en `hg-aspect-image`.
+- Integración de la gestión de assets en el flujo de build (eliminada duplicación entre scripts).
+- Documentación: índice y secciones del README, simplificación de `SUPERPROMPT.md`.
+
 ### v1.0.12 - Diciembre 2024
 
 **🎉 Refactorización arquitectural completa**

package/config.json

@@ -36,6 +36,14 @@
       }
     ],
     "fonts": [
+      {
+        "source": "src/assets/fonts/suisse-intl-thin.woff2",
+        "dest": "dist/assets/fonts/suisse-intl-thin.woff2"
+      },
+      {
+        "source": "src/assets/fonts/suisse-intl-thin.woff",
+        "dest": "dist/assets/fonts/suisse-intl-thin.woff"
+      },
       {
         "source": "src/assets/fonts/suisse-intl-light.woff2",
         "dest": "dist/assets/fonts/suisse-intl-light.woff2"
@@ -68,6 +76,22 @@
         "source": "src/assets/fonts/suisse-intl-semibold.woff",
         "dest": "dist/assets/fonts/suisse-intl-semibold.woff"
       },
+      {
+        "source": "src/assets/fonts/SuisseIntlMono-Regular-WebS.woff2",
+        "dest": "dist/assets/fonts/SuisseIntlMono-Regular-WebS.woff2"
+      },
+      {
+        "source": "src/assets/fonts/SuisseIntlMono-Regular-WebS.woff",
+        "dest": "dist/assets/fonts/SuisseIntlMono-Regular-WebS.woff"
+      },
+      {
+        "source": "src/assets/fonts/SuisseIntlMono-Bold-WebS.woff2",
+        "dest": "dist/assets/fonts/SuisseIntlMono-Bold-WebS.woff2"
+      },
+      {
+        "source": "src/assets/fonts/SuisseIntlMono-Bold-WebS.woff",
+        "dest": "dist/assets/fonts/SuisseIntlMono-Bold-WebS.woff"
+      },
       {
         "source": "src/assets/fonts/suisse-works-regular.woff2",
         "dest": "dist/assets/fonts/suisse-works-regular.woff2"
@@ -117,10 +141,13 @@
     "bg-cream": "#f4f2ed"
   },
   "fontFamilyMap": {
+    "primary-thin": "\"suisse-thin\", Arial, Helvetica, sans-serif",
     "primary-light": "\"suisse-light\", Arial, Helvetica, sans-serif",
     "primary-regular": "\"suisse-regular\", Arial, Helvetica, sans-serif",
     "primary-bold": "\"suisse-semibold\", Arial, Helvetica, sans-serif",
-    "secondary": "\"suisse-medium\", Arial, Helvetica, sans-serif"
+    "secondary": "\"suisse-medium\", Arial, Helvetica, sans-serif",
+    "mono-regular": "\"suisse-mono-regular\", ui-monospace, monospace",
+    "mono-bold": "\"suisse-mono-bold\", ui-monospace, monospace"
   },
   "spacingMap": {
     "0": "0",
@@ -680,9 +707,21 @@
     }
   },
   "typo": {
+    "title-thin": {
+      "fontFamily": "\"suisse-thin\", Arial, Helvetica, sans-serif",
+      "fontWeight": "100",
+      "mobile": {
+        "fontSize": "24px",
+        "lineHeight": "1"
+      },
+      "desktop": {
+        "fontSize": "24px",
+        "lineHeight": "1"
+      }
+    },
     "title-xxl": {
       "fontFamily": "\"suisse-regular\", Arial, Helvetica, sans-serif",
-      "fontWeight": "300",
+      "fontWeight": "400",
       "mobile": {
         "fontSize": "24px",
         "lineHeight": "1"
@@ -708,7 +747,7 @@
     },
     "title-l-b": {
       "fontFamily": "\"suisse-regular\", Arial, Helvetica, sans-serif",
-      "fontWeight": "300",
+      "fontWeight": "400",
       "mobile": {
         "fontSize": "12px",
         "lineHeight": "1.4"
@@ -720,7 +759,7 @@
     },
     "title-l": {
       "fontFamily": "\"suisse-light\", Arial, Helvetica, sans-serif",
-      "fontWeight": "100",
+      "fontWeight": "300",
       "letterSpacing": "0.16em",
       "textTransform": "uppercase",
       "mobile": {
@@ -734,7 +773,7 @@
     },
     "title-m": {
       "fontFamily": "\"suisse-light\", Arial, Helvetica, sans-serif",
-      "fontWeight": "100",
+      "fontWeight": "300",
       "letterSpacing": "0.16em",
       "mobile": {
         "fontSize": "12px",
@@ -747,7 +786,7 @@
     },
     "title-s-b": {
       "fontFamily": "\"suisse-regular\", Arial, Helvetica, sans-serif",
-      "fontWeight": "300",
+      "fontWeight": "400",
       "letterSpacing": "0.16em",
       "mobile": {
         "fontSize": "10px",
@@ -760,7 +799,7 @@
     },
     "title-s": {
       "fontFamily": "\"suisse-light\", Arial, Helvetica, sans-serif",
-      "fontWeight": "100",
+      "fontWeight": "300",
       "letterSpacing": "0.16em",
       "textTransform": "uppercase",
       "mobile": {
@@ -774,7 +813,7 @@
     },
     "text-l": {
       "fontFamily": "\"suisse-light\", Arial, Helvetica, sans-serif",
-      "fontWeight": "100",
+      "fontWeight": "300",
       "letterSpacing": "0.04em",
       "mobile": {
         "fontSize": "13px",
@@ -787,7 +826,7 @@
     },
     "text-m": {
       "fontFamily": "\"suisse-light\", Arial, Helvetica, sans-serif",
-      "fontWeight": "100",
+      "fontWeight": "300",
       "letterSpacing": "0.04em",
       "mobile": {
         "fontSize": "12px",
@@ -800,7 +839,7 @@
     },
     "p-tag": {
       "fontFamily": "\"suisse-light\", Arial, Helvetica, sans-serif",
-      "fontWeight": "100",
+      "fontWeight": "300",
       "letterSpacing": "0.16em",
       "mobile": {
         "fontSize": "9px",
@@ -813,7 +852,7 @@
     },
     "hg-body-l": {
       "fontFamily": "\"suisse-light\", Arial, Helvetica, sans-serif",
-      "fontWeight": "100",
+      "fontWeight": "300",
       "letterSpacing": "0.04em",
       "mobile": {
         "fontSize": "12px",
@@ -826,7 +865,7 @@
     },
     "hg-body-l-b": {
       "fontFamily": "\"suisse-regular\", Arial, Helvetica, sans-serif",
-      "fontWeight": "300",
+      "fontWeight": "400",
       "letterSpacing": "0.04em",
       "mobile": {
         "fontSize": "12px",
@@ -839,7 +878,7 @@
     },
     "hg-body-m": {
       "fontFamily": "\"suisse-light\", Arial, Helvetica, sans-serif",
-      "fontWeight": "100",
+      "fontWeight": "300",
       "letterSpacing": "0.04em",
       "mobile": {
         "fontSize": "12px",
@@ -852,7 +891,7 @@
     },
     "hg-body-m-b": {
       "fontFamily": "\"suisse-regular\", Arial, Helvetica, sans-serif",
-      "fontWeight": "300",
+      "fontWeight": "400",
       "letterSpacing": "0.04em",
       "mobile": {
         "fontSize": "12px",
@@ -865,7 +904,7 @@
     },
     "label-m": {
       "fontFamily": "\"suisse-light\", Arial, Helvetica, sans-serif",
-      "fontWeight": "100",
+      "fontWeight": "300",
       "letterSpacing": "0.16em",
       "textTransform": "uppercase",
       "mobile": {
@@ -879,7 +918,7 @@
     },
     "label-m-b": {
       "fontFamily": "\"suisse-regular\", Arial, Helvetica, sans-serif",
-      "fontWeight": "300",
+      "fontWeight": "400",
       "letterSpacing": "0.16em",
       "textTransform": "uppercase",
       "mobile": {
@@ -893,7 +932,7 @@
     },
     "label-s": {
       "fontFamily": "\"suisse-light\", Arial, Helvetica, sans-serif",
-      "fontWeight": "100",
+      "fontWeight": "300",
       "letterSpacing": "0.06em",
       "textTransform": "uppercase",
       "mobile": {
@@ -907,7 +946,7 @@
     },
     "label-s-b": {
       "fontFamily": "\"suisse-regular\", Arial, Helvetica, sans-serif",
-      "fontWeight": "300",
+      "fontWeight": "400",
       "letterSpacing": "0.06em",
       "textTransform": "uppercase",
       "mobile": {
@@ -918,6 +957,34 @@
         "fontSize": "10px",
         "lineHeight": "1"
       }
+    },
+    "label-mono": {
+      "fontFamily": "\"suisse-mono-regular\", ui-monospace, monospace",
+      "fontWeight": "400",
+      "letterSpacing": "0.06em",
+      "textTransform": "uppercase",
+      "mobile": {
+        "fontSize": "10px",
+        "lineHeight": "1.2"
+      },
+      "desktop": {
+        "fontSize": "10px",
+        "lineHeight": "1.2"
+      }
+    },
+    "label-mono-b": {
+      "fontFamily": "\"suisse-mono-bold\", ui-monospace, monospace",
+      "fontWeight": "700",
+      "letterSpacing": "0.06em",
+      "textTransform": "uppercase",
+      "mobile": {
+        "fontSize": "10px",
+        "lineHeight": "1.2"
+      },
+      "desktop": {
+        "fontSize": "10px",
+        "lineHeight": "1.2"
+      }
     }
   }
 }

package/dist/componentes.html

@@ -4,20 +4,13 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>HolyGrail5 — Componentes base</title>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Instrument+Sans:regular,100,500,600,700">
   <!-- Framework base -->
   <link rel="stylesheet" href="output.css">
   <!-- Tema base genérico: dutti (variables + componentes) -->
   <link rel="stylesheet" href="themes/dutti.css">
-  <!-- Estilos compartidos de guía (header, sidebar, demo-*) -->
+  <!-- Estilos compartidos de guía (header, sidebar, demo-*; incluye @font-face Suisse y la regla body en Suisse) -->
   <link rel="stylesheet" href="guide-styles.css">
   <style>
-    body {
-      font-family: 'Instrument Sans', sans-serif !important;
-    }
-
     /* Descripción de cada sección (debajo del título) */
     .cmp-desc {
       font-size: 14px;

package/dist/developer-guide.md

@@ -384,6 +384,10 @@ Las clases tipográficas se generan desde `config.typo`. Cada clase se aplica di
 <!-- Body variants -->
 <p class="hg-hg-body-m">Body medium (12→13px)</p>
 <p class="hg-hg-body-m-b">Body medium bold (weight 400)</p>
+
+<!-- Labels mono (Suisse Intl Mono, 10px / 120%) -->
+<span class="label-mono">Label mono regular</span>
+<span class="label-mono-b">Label mono bold</span>
 ```
 
 ### Cómo funciona

package/dist/guide-styles.css

@@ -10,16 +10,24 @@
    antiguos.
    ============================================ */
 @font-face {
-  font-family: "suisse-light";
+  font-family: "suisse-thin";
   font-weight: 100;
   font-display: swap;
+  src: local("SuisseIntl-Thin"),
+       url('assets/fonts/suisse-intl-thin.woff2') format('woff2'),
+       url('assets/fonts/suisse-intl-thin.woff') format('woff');
+}
+@font-face {
+  font-family: "suisse-light";
+  font-weight: 300;
+  font-display: swap;
   src: local("SuisseIntl-Light"),
        url('assets/fonts/suisse-intl-light.woff2') format('woff2'),
        url('assets/fonts/suisse-intl-light.woff') format('woff');
 }
 @font-face {
   font-family: "suisse-regular";
-  font-weight: 300;
+  font-weight: 400;
   font-display: swap;
   src: local("SuisseIntl-Regular"),
        url('assets/fonts/suisse-intl-regular.woff2') format('woff2'),
@@ -27,7 +35,7 @@
 }
 @font-face {
   font-family: "suisse-medium";
-  font-weight: 400;
+  font-weight: 500;
   font-display: swap;
   src: local("SuisseIntl-Medium"),
        url('assets/fonts/suisse-intl-medium.woff2') format('woff2'),
@@ -35,12 +43,28 @@
 }
 @font-face {
   font-family: "suisse-semibold";
-  font-weight: 500;
+  font-weight: 600;
   font-display: swap;
   src: local("SuisseIntl-SemiBold"),
        url('assets/fonts/suisse-intl-semibold.woff2') format('woff2'),
        url('assets/fonts/suisse-intl-semibold.woff') format('woff');
 }
+@font-face {
+  font-family: "suisse-mono-regular";
+  font-weight: 400;
+  font-display: swap;
+  src: local("SuisseIntlMono-Regular"),
+       url('assets/fonts/SuisseIntlMono-Regular-WebS.woff2') format('woff2'),
+       url('assets/fonts/SuisseIntlMono-Regular-WebS.woff') format('woff');
+}
+@font-face {
+  font-family: "suisse-mono-bold";
+  font-weight: 700;
+  font-display: swap;
+  src: local("SuisseIntlMono-Bold"),
+       url('assets/fonts/SuisseIntlMono-Bold-WebS.woff2') format('woff2'),
+       url('assets/fonts/SuisseIntlMono-Bold-WebS.woff') format('woff');
+}
 /* Suisse Works (serif) — reservado para el tema Limited */
 @font-face {
   font-family: "suisse-works-regular";
@@ -70,9 +94,7 @@
 /* ============================================
    RESET Y BASE
    ============================================ */
-* {
-  scroll-behavior: smooth;
-}
+/* Scroll nativo (sin suavizado): los saltos de ancla son instantáneos. */
 
 body {
   margin: 0;
@@ -96,14 +118,14 @@ h2 {
   margin-left: 0;
   flex: 1;
   padding: 0;
-  padding-bottom: 10rem;
+  padding-bottom: 4rem;
   max-width: 100%;
 }
 
 .guide-main-content h2 {
-  font-size: 50px;
-  padding-bottom: 40px;
-  margin-bottom: 40px;
+  font-size: 34px;
+  padding-bottom: 12px;
+  margin-bottom: 8px;
   font-weight: 500;
   color: #000;
   font-family: var(--hg-typo-font-family-primary-bold);
@@ -114,27 +136,27 @@ h2 {
   font-family: var(--hg-typo-font-family-primary-regular);
   color: #000;
   font-size: 16px;
-  line-height: 28px;
-  margin: 80px 0 12px;
+  line-height: 1.4;
+  margin: 2rem 0 0.75rem;
 }
 
 @media (min-width: 768px) {
   .guide-main-content h2 {
-    font-size: 64px;
-    padding-bottom: 40px;
-    margin-bottom: 10px;
+    font-size: 44px;
+    padding-bottom: 12px;
+    margin-bottom: 8px;
   }
 
   .guide-main-content h3 {
     font-family: var(--hg-typo-font-family-primary-regular);
     color: #000;
-    font-size: 20px;
-    line-height: 28px;
-    margin: 80px 0 12px;
+    font-size: 18px;
+    line-height: 1.4;
+    margin: 2rem 0 0.75rem;
   }
-  
+
   .guide-section-description {
-    font-size: 28px;
+    font-size: 18px;
   }
 }
 
@@ -147,20 +169,40 @@ h2 {
   border-radius: 8px;
 }
 
+/* Compactación / unificación del ritmo vertical de la guía.
+   Las cabeceras de sección usan `.row.mb-120` (120px) como separador;
+   aquí lo reducimos a un valor coherente y mucho más pegado. También
+   homogeneizamos el espacio entre secciones y el del separador <hr>. */
+.guide-section .row.mb-120,
+.guide-section--highlighted .row.mb-120 {
+  margin-bottom: 1.5rem;
+}
+.guide-section + .guide-section,
+.guide-section--highlighted + .guide-section,
+.guide-section + .guide-section--highlighted {
+  margin-top: 2.5rem;
+}
+.guide-section .row.mb-120 hr,
+.guide-section hr {
+  margin: 0.5rem 0 0;
+  border: 0;
+  border-top: 1px solid #e9e9e9;
+}
+
 .guide-section.guide-section--highlighted {
   background: #fff;
-  padding: 5rem 0 2rem 0;
+  padding: 2rem 0 1rem 0;
 }
 @media (min-width: 768px) {
   .guide-section.guide-section--highlighted {
-    padding: 5rem 0;
+    padding: 2.5rem 0 1.5rem 0;
   }
 }
 
 .guide-section-title {
   font-size: 1.5rem;
   font-weight: 500;
-  padding-bottom: 2rem;
+  padding-bottom: 1rem;
   line-height: 1.2;
   display: flex;
   justify-content: space-between;
@@ -170,34 +212,19 @@ h2 {
 
 @media (min-width: 768px) {
   .guide-section-title {
-    margin-top: 3rem;
-    flex-direction: row;
+    margin-top: 1.25rem;
+    /* Se mantiene en columna: el contenido (cajas explicativas) queda
+       debajo del titular y alineado a la izquierda, no en la mitad derecha. */
   }
 }
 
 .guide-section-description {
-  margin-top: 1rem;
-  font-size: 28px;
-  color: #000000;
-  font-family: var(--hg-typo-font-family-primary-light);
-  margin-bottom: 20px;
-
-  line-height: 1.2;
-  width: 100%;
-  margin-left: 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-}
-
-.guide-section-description {
-  margin-top: 1rem;
-  font-size: 28px;
+  margin-top: 0.5rem;
+  font-size: 18px;
   color: #000000;
   font-family: var(--hg-typo-font-family-primary-light);
-  margin-bottom: 20px;
-
-  line-height: 1.2;
+  margin-bottom: 8px;
+  line-height: 1.35;
   width: 100%;
   margin-left: 0;
   display: flex;
@@ -543,14 +570,14 @@ h2 {
   color: #919191;
   letter-spacing: 0.05em;
   border-bottom: 1px solid #ddd;
-  padding: 0.75rem;
+  padding: 0.5rem 0.75rem;
   padding-left: 0;
   text-align: left;
   z-index: 10;
 }
 
 .guide-table td {
-  padding: 0.75rem;
+  padding: 0.38rem 0.75rem;
   padding-left: 0;
   border-bottom: 1px solid #efefef;
   vertical-align: middle;
@@ -578,9 +605,9 @@ h2 {
 
 .guide-table .guide-font-family-preview {
   min-width: 100px;
-  padding: 0.75rem;
-  min-height: 50px;
-  font-size: 1.5rem;
+  padding: 0.4rem;
+  min-height: 34px;
+  font-size: 1.25rem;
   /* Dejamos que cada font-family muestre su peso natural. En
      esta convención (una familia por peso) cada @font-face
      declara un único font-weight, así que forzar un weight
@@ -677,7 +704,6 @@ h2 {
 .guide-text-bold,
 .guide-table .guide-table-name,
 .guide-layout-class-name {
-  font-weight: 600;
   color: #000000;
   font-family: var(--hg-typo-font-family-primary-regular);
 }
@@ -1295,15 +1321,18 @@ h2 {
   gap: var(--hg-spacing-24);
   max-width: 100%;
   margin-left: 0;
-  margin-bottom: 10rem;
+  margin-bottom: 2rem;
 }
 
+/* Las cajas explicativas van debajo del titular + línea, alineadas a la
+   IZQUIERDA (antes: max-width 50% + margin-left 50% las empujaba a la
+   mitad derecha de la página). */
 @media (min-width: 768px) {
   .demo-section-2 {
     grid-template-columns: repeat(2, 1fr);
-    max-width: 50%;
-    margin-left: 50%;
-    margin-bottom: 10rem;
+    width: 100%;
+    margin-left: 0;
+    margin-bottom: 2rem;
   }
 }