fix(i18n): sync all lesson translations with English source

Synchronizes 72 lesson files across 5 languages (de, pl, es, ar, uk) to match
the English source. This ensures code, solutions, and validations are identical
while only title, description, task, and message fields are translated.

Changes include:
- Box model lessons (01-box-model.json)
- Units and variables (05-units-variables.json)
- Transitions and animations (06-transitions-animations.json)
- Responsive design (08-responsive.json)
- HTML elements (20-html-elements.json)
- HTML forms basic and validation (21, 22)
- HTML details/summary, progress/meter (23, 24)
- HTML datalist, dialog, fieldset (25, 27, 28)
- HTML tables and SVG (30, 32)
- HTML marquee (31)
- Welcome module (00-welcome.json)

Fixes validation inconsistencies and removes extra content that exceeded
English source. German translations were largely correct; Polish, Spanish,
Arabic, and Ukrainian required full translations.

lessons/es/08-responsive.json

@@ -2,14 +2,14 @@
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "responsive-design",
 	"title": "CSS Responsive Design",
-	"description": "Make your layouts adapt to different screen sizes using media queries and fluid design techniques.",
+	"description": "Adapta tus layouts a diferentes tamaños de pantalla usando media queries y técnicas de diseño fluido.",
 	"difficulty": "intermediate",
 	"lessons": [
 		{
 			"id": "responsive-1",
 			"title": "Media Queries",
-			"description": "Understand the syntax and use cases for CSS media queries to apply styles conditionally based on viewport characteristics.",
-			"task": "Write a media query with <kbd>@media (max-width: 600px)</kbd> that changes <kbd>.panel</kbd> background to <kbd>lightcoral</kbd>.",
+			"description": "Comprende la sintaxis y casos de uso de las media queries de CSS para aplicar estilos condicionalmente basándose en características del viewport.<br><br><pre>@media (max-width: 600px) {\n  .panel {\n    background: lightcoral;\n  }\n}</pre>",
+			"task": "Escribe una media query con <kbd>@media (max-width: 600px)</kbd> que cambie el fondo de <kbd>.panel</kbd> a <kbd>lightcoral</kbd>.",
 			"previewHTML": "<div class=\"panel\">Resize the window</div>",
 			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .panel { padding: 1rem; background: lightblue; }",
 			"sandboxCSS": "",
@@ -22,19 +22,19 @@
 				{
 					"type": "regex",
 					"value": "@media\\s*\\(max-width:\\s*600px\\)",
-					"message": "Use <kbd>@media (max-width: 600px)</kbd>",
+					"message": "Usa <kbd>@media (max-width: 600px)</kbd>",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "contains",
 					"value": ".panel",
-					"message": "Target <kbd>.panel</kbd> inside the media query",
+					"message": "Selecciona <kbd>.panel</kbd> dentro de la media query",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "background", "expected": "lightcoral" },
-					"message": "Set <kbd>background: lightcoral</kbd>",
+					"message": "Establece <kbd>background: lightcoral</kbd>",
 					"options": { "exact": false }
 				}
 			]
@@ -42,8 +42,8 @@
 		{
 			"id": "responsive-2",
 			"title": "Fluid Type",
-			"description": "Use relative units like <kbd>vw</kbd> to make font sizes scale with the viewport width.",
-			"task": "Set <kbd>font-size: 5vw</kbd> on <kbd>.text</kbd> so it scales as the viewport changes.",
+			"description": "Usa unidades relativas como <kbd>vw</kbd> para que los tamaños de fuente escalen con el ancho del viewport.",
+			"task": "Establece <kbd>font-size: 5vw</kbd> para que escale con el viewport.",
 			"previewHTML": "<p class=\"text\">Fluid Typography</p>",
 			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; }",
 			"sandboxCSS": "",
@@ -53,46 +53,50 @@
 			"solution": "  font-size: 5vw;",
 			"previewContainer": "preview-area",
 			"validations": [
-				{ "type": "property_value", "value": { "property": "font-size", "expected": "5vw" }, "message": "Set <kbd>font-size: 5vw</kbd>" }
+				{
+					"type": "property_value",
+					"value": { "property": "font-size", "expected": "5vw" },
+					"message": "Establece <kbd>font-size: 5vw</kbd>"
+				}
 			]
 		},
 		{
 			"id": "responsive-3",
-			"title": "Flex Grids",
-			"description": "Combine CSS Grid with <kbd>auto-fit</kbd> or <kbd>auto-fill</kbd> for responsive column layouts.",
-			"task": "Add <kbd>display: grid</kbd>, <kbd>grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))</kbd>, and <kbd>gap: 1rem</kbd> to <kbd>.cards</kbd>.",
-			"previewHTML": "<div class=\"cards\"><div>1</div><div>2</div><div>3</div><div>4</div></div>",
-			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .cards > div { background: #d1c4e9; padding: 1rem; }",
+			"title": "Responsive Grid",
+			"description": "Combina CSS Grid con <kbd>auto-fit</kbd> o <kbd>auto-fill</kbd> para layouts de columnas responsivos que ajustan automáticamente el número de columnas según el espacio disponible.",
+			"task": "Añade <kbd>display: grid</kbd>, <kbd>grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))</kbd> y <kbd>gap: 1rem</kbd>.",
+			"previewHTML": "<section class=\"features\"><article class=\"feature\"><h3>Fast</h3><p>Lightning quick load times</p></article><article class=\"feature\"><h3>Secure</h3><p>Enterprise-grade security</p></article><article class=\"feature\"><h3>Reliable</h3><p>99.9% uptime guaranteed</p></article><article class=\"feature\"><h3>Support</h3><p>24/7 customer service</p></article></section>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .feature { background: white; padding: 1rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .feature h3 { margin: 0 0 8px; color: steelblue; } .feature p { margin: 0; color: #666; font-size: 0.9rem; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Create a responsive grid */\n.cards {",
+			"codePrefix": ".features {\n  ",
 			"initialCode": "",
-			"codeSuffix": "}",
-			"solution": "  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 1rem;",
+			"codeSuffix": "\n}",
+			"solution": "display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 1rem;",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "property_value",
 					"value": { "property": "display", "expected": "grid" },
-					"message": "Set <kbd>display: grid</kbd>"
+					"message": "Establece <kbd>display: grid</kbd>"
 				},
 				{
 					"type": "regex",
 					"value": "repeat\\(auto-fit,\\s*minmax\\(200px,\\s*1fr\\)\\)",
-					"message": "Use <kbd>repeat(auto-fit, minmax(200px, 1fr))</kbd>",
+					"message": "Usa <kbd>repeat(auto-fit, minmax(200px, 1fr))</kbd>",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "gap", "expected": "1rem" },
-					"message": "Set <kbd>gap: 1rem</kbd>"
+					"message": "Establece <kbd>gap: 1rem</kbd>"
 				}
 			]
 		},
 		{
 			"id": "responsive-4",
 			"title": "Mobile-First",
-			"description": "Adopt a mobile-first approach by writing base styles for small screens and enhancing for larger viewports.",
-			"task": "Write a media query with <kbd>@media (min-width: 768px)</kbd> that sets <kbd>.sidebar</kbd> width to <kbd>250px</kbd>.",
+			"description": "Adopta un enfoque mobile-first escribiendo estilos base para pantallas pequeñas y mejorándolos para viewports más grandes.",
+			"task": "Escribe una media query con <kbd>@media (min-width: 768px)</kbd> que establezca el ancho de <kbd>.sidebar</kbd> a <kbd>250px</kbd>.",
 			"previewHTML": "<aside class=\"sidebar\">Sidebar</aside>",
 			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .sidebar { background: #c8e6c9; padding: 1rem; }",
 			"sandboxCSS": "",
@@ -105,19 +109,19 @@
 				{
 					"type": "regex",
 					"value": "@media\\s*\\(min-width:\\s*768px\\)",
-					"message": "Use <kbd>@media (min-width: 768px)</kbd>",
+					"message": "Usa <kbd>@media (min-width: 768px)</kbd>",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "contains",
 					"value": ".sidebar",
-					"message": "Target <kbd>.sidebar</kbd> inside media query",
+					"message": "Selecciona <kbd>.sidebar</kbd> en la media query",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "width", "expected": "250px" },
-					"message": "Set <kbd>width: 250px</kbd>",
+					"message": "Establece <kbd>width: 250px</kbd>",
 					"options": { "exact": false }
 				}
 			]