holygrail5 1.0.13 → 1.0.15

package/README.md

@@ -115,7 +115,7 @@ holygrail5/
 │   ├── assets/                    # Assets estáticos (imágenes)
 │   │   ├── intro.jpg
 │   │   ├── introm.jpg
-│   │   └── margenes.webp
+│   │   └── margen.webp
 │   │
 │   ├── build/                     # Sistema de build modular
 │   │   ├── asset-manager.js       # Gestión de assets
@@ -248,7 +248,7 @@ Puedes configurar qué archivos CSS e imágenes se copian a `dist/` agregando un
         "dest": "dist/assets/intro.jpg"
       },
       {
-        "source": "src/assets/margenes.webp",
+        "source": "src/assets/margen.webp",
         "dest": "dist/assets/margen.webp"
       }
     ]

package/config.json

@@ -25,7 +25,7 @@
         "dest": "dist/assets/introm.jpg"
       },
       {
-        "source": "src/assets/margenes.webp",
+        "source": "src/assets/margen.webp",
         "dest": "dist/assets/margen.webp"
       }
     ]
@@ -42,7 +42,7 @@
     "primary": "#000000",
     "error": "#b40016",
     "info": "#1a32a4",
-    "success": "#76ae4a",
+    "success": "#12882C",
     "warning": "#ffc700",
     "feel": "#fb9962",
     "feel-dark": "#c94c07",

package/dist/guide-styles.css

@@ -39,7 +39,6 @@ h2 {
   color: #000;
   font-family: "Instrument Sans", sans-serif;
   letter-spacing: 0;
-  border-bottom: 1px solid var(--hg-color-primary);
 }
 
 .guide-main-content h3 {
@@ -52,9 +51,9 @@ h2 {
 
 @media (min-width: 768px) {
   .guide-main-content h2 {
-    font-size: 88px;
-    padding-bottom: 60px;
-    margin-bottom: 60px;
+    font-size: 64px;
+    padding-bottom: 40px;
+    margin-bottom: 10px;
   }
 
   .guide-main-content h3 {
@@ -91,8 +90,9 @@ h2 {
 
 .guide-section-title {
   font-size: 1.5rem;
-  font-weight: 700;
+  font-weight: 500;
   padding-bottom: 2rem;
+  line-height: 1.2;
   display: flex;
   justify-content: space-between;
   flex-direction: column;
@@ -111,19 +111,29 @@ h2 {
   font-size: 28px;
   color: #000000;
   font-family: "Instrument Sans", sans-serif;
+  margin-bottom: 20px;
 
   line-height: 1.2;
-  margin-bottom: 1rem;
   width: 100%;
   margin-left: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
 }
 
-@media (min-width: 768px) {
-  .guide-section-description {
-    margin-bottom: 5rem;
-    font-size: 48px;
-    width: 50%;
-  }
+.guide-section-description {
+  margin-top: 1rem;
+  font-size: 28px;
+  color: #000000;
+  font-family: "Instrument Sans", sans-serif;
+  margin-bottom: 20px;
+
+  line-height: 1.2;
+  width: 100%;
+  margin-left: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
 }
 
 
@@ -173,6 +183,7 @@ h2 {
   border: 1px solid #000000;
   padding: 4px;
   border-radius: 8px;
+  width: max-content;
 }
 
 .guide-logo a {
@@ -385,6 +396,88 @@ h2 {
   font-weight: 600;
 }
 
+/* Rectángulo de lados afectados (tabla spacing modernas) */
+.guide-spacing-sides-box {
+  width: 32px;
+  height: 24px;
+  box-sizing: border-box;
+  border: 2px solid #e0e0e0;
+  background: #fafafa;
+  flex-shrink: 0;
+}
+.guide-spacing-sides-box.sides-inline {
+  border-left-color: var(--hg-color-info, #0170e9);
+  border-right-color: var(--hg-color-info, #0170e9);
+  border-left-width: 3px;
+  border-right-width: 3px;
+}
+.guide-spacing-sides-box.sides-block {
+  border-top-color: var(--hg-color-info, #0170e9);
+  border-bottom-color: var(--hg-color-info, #0170e9);
+  border-top-width: 3px;
+  border-bottom-width: 3px;
+}
+.guide-spacing-sides-box.sides-all {
+  border-color: var(--hg-color-info, #0170e9);
+  border-width: 3px;
+}
+.guide-spacing-sides-box.sides-top {
+  border-top-color: var(--hg-color-info, #0170e9);
+  border-top-width: 3px;
+}
+.guide-spacing-sides-box.sides-right {
+  border-right-color: var(--hg-color-info, #0170e9);
+  border-right-width: 3px;
+}
+.guide-spacing-sides-box.sides-bottom {
+  border-bottom-color: var(--hg-color-info, #0170e9);
+  border-bottom-width: 3px;
+}
+.guide-spacing-sides-box.sides-left {
+  border-left-color: var(--hg-color-info, #0170e9);
+  border-left-width: 3px;
+}
+.guide-spacing-sides-cell {
+  vertical-align: middle;
+  padding-right: 0.5rem;
+}
+.guide-spacing-sides-cell .guide-spacing-sides-box {
+  display: block;
+}
+
+/* Tabla horizontal compacta de equivalencias valor/rem/px (poco espacio vertical) */
+.guide-spacing-compact-wrap {
+  overflow-x: auto;
+  margin: 0.25rem 0;
+  max-width: 100%;
+}
+.guide-table.guide-spacing-compact {
+  font-size: 0.7rem;
+  width: max-content;
+  min-width: 100%;
+  margin: 0;
+}
+.guide-table.guide-spacing-compact th,
+.guide-table.guide-spacing-compact td {
+  padding: 0.2rem 0.35rem;
+  border: 1px solid #eee;
+  white-space: nowrap;
+}
+.guide-table.guide-spacing-compact thead th {
+  background: #f9f9f9;
+  font-weight: 600;
+}
+.guide-table.guide-spacing-compact .guide-spacing-compact-label {
+  font-weight: 600;
+  background: #fafafa;
+  color: #333;
+}
+.guide-spacing-compact-note {
+  margin: 0.25rem 0 0 0;
+  font-size: 0.75rem;
+  opacity: 0.85;
+}
+
 /* ============================================
    TIPOGRAFÍA Y TEXTO
    ============================================ */
@@ -735,6 +828,22 @@ h2 {
   padding: 1.5rem 0;
 }
 
+/* Dos columnas para la explicación de helpers de espaciado */
+.guide-spacing-explanation-cols {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2rem;
+  margin-top: 0.5rem;
+}
+@media (max-width: 768px) {
+  .guide-spacing-explanation-cols {
+    grid-template-columns: 1fr;
+  }
+}
+.guide-spacing-explanation-col {
+  min-width: 0;
+}
+
 .guide-info-box-title {
   margin: 0 0 1rem 0;
   font-size: 1.125rem;
@@ -1006,7 +1115,7 @@ h2 {
 }
 
 .demo-title {
-  font-size: var(--hg-typo-font-size-24);
+  font-size: var(--hg-typo-font-size-12);
   font-weight: var(--hg-typo-font-weight-900);
   margin-block-end: var(--hg-spacing-24);
   padding-block-end: var(--hg-spacing-16);
@@ -1053,6 +1162,20 @@ h2 {
   background-repeat: no-repeat;
   position: relative;
   overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.case-study-holygrail-title {
+  font-family: 'Roboto', sans-serif;
+  font-size: clamp(2.5rem, 12vw, 8rem);
+  font-weight: 100;
+  letter-spacing: 0.2em;
+  color: rgba(255, 255, 255, 0.92);
+  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
+  text-align: center;
+  line-height: 1.1;
 }
 
 @media (min-width: 768px) {