update-base-config 0.1.0

package/templates/skills/tailwind/docs/SKILL_TAILWIND_BEFORE_AFTER.md

@@ -0,0 +1,796 @@
+# Ejemplos: Antes y Después - Tailwind Custom
+
+## 📌 Comparación Lado a Lado
+
+Estos son ejemplos reales de cómo **transformar código** que no usa los presets correctamente.
+
+---
+
+## 1️⃣ Ejemplo: Hero/Header
+
+### ❌ ANTES (Incorrecto)
+
+```vue
+<template>
+	<header class="bg-blue-600 py-8 px-4">
+		<h1 class="text-white text-4xl font-bold">Bienvenido</h1>
+		<p class="text-blue-100 mt-2">Descripción</p>
+		<div class="bg-blue-500 h-1 w-24 mt-4"></div>
+	</header>
+</template>
+
+<style scoped>
+/* Estilos inline en Tailwind genérico */
+</style>
+```
+
+**Problemas:**
+
+- ❌ `bg-blue-600` - Color genérico, no corporativo
+- ❌ `text-blue-100` - Tonalidad incorrecta
+- ❌ `bg-blue-500` - Línea decorativa con color genérico
+
+### ✅ DESPUÉS (Correcto)
+
+```vue
+<template>
+	<header class="bg-brand py-8 px-4">
+		<h1 class="text-white text-4xl font-bold">Bienvenido</h1>
+		<p class="text-brand-light mt-2">Descripción</p>
+		<div class="bg-brand-light h-1 w-24 mt-4"></div>
+	</header>
+</template>
+
+<style scoped>
+/* Ahora usa colores corporativos */
+</style>
+```
+
+**Mejoras:**
+
+- ✅ `bg-brand` - Azul corporativo del Banco
+- ✅ `text-brand-light` - Tonalidad clara del brand
+- ✅ `bg-brand-light` - Línea decorativa con color coherente
+
+---
+
+## 2️⃣ Ejemplo: Gradiente en Título
+
+### ❌ ANTES (Incorrecto)
+
+```vue
+<template>
+	<h1 class="text-4xl font-bold bg-gradient-to-r from-blue-400 to-blue-600 bg-clip-text text-transparent">
+		Charlas Mesa de Dinero
+	</h1>
+</template>
+```
+
+**Problemas:**
+
+- ❌ `from-blue-400 to-blue-600` - Gradiente genérico
+- ❌ No usa colores corporativos
+- ❌ No coincide con el design system
+
+### ✅ DESPUÉS (Correcto)
+
+```vue
+<template>
+	<h1 class="text-4xl font-bold bg-gradient-to-r from-brand-light to-primary bg-clip-text text-transparent">
+		Charlas Mesa de Dinero
+	</h1>
+</template>
+```
+
+**Mejoras:**
+
+- ✅ `from-brand-light to-primary` - Gradiente corporativo
+- ✅ Usa colores definidos en preset
+- ✅ Coherente con design system del Banco
+
+---
+
+## 3️⃣ Ejemplo: Card con Contenido
+
+### ❌ ANTES (Incorrecto)
+
+```vue
+<template>
+	<div class="border-2 border-gray-300 rounded-lg p-6 bg-white">
+		<div class="h-12 bg-blue-600 rounded flex items-center justify-center">
+			<span class="text-white font-bold">BCH</span>
+		</div>
+		<h3 class="text-xl font-bold text-blue-900 mt-4">Título</h3>
+		<p class="text-gray-600 mt-2">Descripción del card</p>
+		<button class="mt-4 bg-blue-500 text-white px-4 py-2 rounded">Ver más</button>
+	</div>
+</template>
+```
+
+**Problemas:**
+
+- ❌ `border-gray-300` - Color genérico
+- ❌ `bg-blue-600` - Azul no corporativo
+- ❌ `text-blue-900` - Tonalidad incorrecta
+- ❌ `bg-blue-500` - Botón con color genérico
+
+### ✅ DESPUÉS (Correcto)
+
+```vue
+<template>
+	<div class="border-2 border-brand-lighter rounded-lg p-6 bg-white">
+		<div class="h-12 bg-brand rounded flex items-center justify-center">
+			<span class="text-white font-bold">BCH</span>
+		</div>
+		<h3 class="text-xl font-bold text-brand-dark mt-4">Título</h3>
+		<p class="text-gray-600 mt-2">Descripción del card</p>
+		<button class="mt-4 bg-primary text-white px-4 py-2 rounded hover:bg-primary-light transition-all">
+			Ver más
+		</button>
+	</div>
+</template>
+```
+
+**Mejoras:**
+
+- ✅ `border-brand-lighter` - Borde con color corporativo
+- ✅ `bg-brand` - Fondo con azul corporativo
+- ✅ `text-brand-dark` - Texto con tonalidad correcta
+- ✅ `bg-primary` + `hover:bg-primary-light` - Botón interactivo corporativo
+
+---
+
+## 4️⃣ Ejemplo: Botón con Estados
+
+### ❌ ANTES (Incorrecto)
+
+```vue
+<template>
+	<button
+		class="px-6 py-3 bg-blue-600 text-white rounded-full font-bold hover:bg-blue-700 active:bg-blue-800"
+		@click="handleClick"
+	>
+		Enviar
+	</button>
+</template>
+```
+
+**Problemas:**
+
+- ❌ `bg-blue-600` - Color genérico
+- ❌ `hover:bg-blue-700` - Tonalidad hover genérica
+- ❌ `active:bg-blue-800` - Estados incorrectos
+
+### ✅ DESPUÉS (Correcto)
+
+```vue
+<template>
+	<button
+		class="px-6 py-3 bg-primary text-white rounded-full font-bold hover:bg-primary-light active:bg-brand transition-all duration-200"
+		@click="handleClick"
+		id="cta-enviar-btn"
+	>
+		Enviar
+	</button>
+</template>
+```
+
+**Mejoras:**
+
+- ✅ `bg-primary` - Color primario corporativo
+- ✅ `hover:bg-primary-light` - Hover con tonalidad clara
+- ✅ `active:bg-brand` - Active con color brand
+- ✅ `transition-all duration-200` - Transición suave
+- ✅ `id="cta-enviar-btn"` - ID para analytics (si es CTA)
+
+---
+
+## 5️⃣ Ejemplo: Gradiente Complejo
+
+### ❌ ANTES (Incorrecto)
+
+```vue
+<template>
+	<section class="bg-gradient-to-br from-blue-50 via-blue-100 to-blue-300 py-12">
+		<div class="max-w-6xl mx-auto">
+			<h2 class="text-3xl font-bold text-blue-900">Beneficios</h2>
+			<div class="grid grid-cols-3 gap-4 mt-6">
+				<div class="bg-white border-l-4 border-blue-600 p-4">
+					<!-- Contenido -->
+				</div>
+			</div>
+		</div>
+	</section>
+</template>
+```
+
+**Problemas:**
+
+- ❌ Gradiente con tonalidades genéricas de azul
+- ❌ `border-blue-600` - Color genérico
+- ❌ `text-blue-900` - Tonalidad incorrecta
+
+### ✅ DESPUÉS (Correcto)
+
+```vue
+<template>
+	<section class="bg-gradient-to-br from-brand-lighter via-brand-light to-brand py-12">
+		<div class="max-w-6xl mx-auto">
+			<h2 class="text-3xl font-bold text-brand-dark">Beneficios</h2>
+			<div class="grid grid-cols-3 gap-4 mt-6">
+				<div class="bg-white border-l-4 border-brand p-4">
+					<!-- Contenido -->
+				</div>
+			</div>
+		</div>
+	</section>
+</template>
+```
+
+**Mejoras:**
+
+- ✅ `from-brand-lighter via-brand-light to-brand` - Gradiente corporativo natural
+- ✅ `border-brand` - Borde con color corporativo
+- ✅ `text-brand-dark` - Texto con tonalidad oscura correcta
+
+---
+
+## 6️⃣ Ejemplo: Componente con Valores Arbitrarios
+
+### ❌ ANTES (Incorrecto)
+
+```vue
+<template>
+	<div
+		class="flex flex-col justify-center gap-4 p-5 text-center shadow rounded-lg my-7 bg-blue-100 border-2 border-blue-500"
+	>
+		<h3 class="text-lg font-bold text-blue-700">Evento Especial</h3>
+		<p class="text-gray-600">Detalles del evento</p>
+	</div>
+</template>
+```
+
+**Problemas:**
+
+- ❌ `bg-blue-100` - Fondo genérico
+- ❌ `border-blue-500` - Borde genérico
+- ❌ `text-blue-700` - Texto genérico
+
+### ✅ DESPUÉS (Correcto)
+
+```vue
+<template>
+	<div
+		class="flex flex-col justify-center gap-4 p-5 text-center shadow rounded-lg my-7 bg-gradient-to-tl from-brand-dark via-brand to-brand/80"
+	>
+		<h3 class="text-lg font-bold text-white">Evento Especial</h3>
+		<p class="text-brand-light">Detalles del evento</p>
+	</div>
+</template>
+```
+
+**Mejoras:**
+
+- ✅ `bg-gradient-to-tl from-brand-dark via-brand to-brand/80` - Gradiente corporativo dinámico
+- ✅ `text-white` - Contraste alto
+- ✅ `text-brand-light` - Descripción con color corporativo
+
+---
+
+## 7️⃣ Ejemplo: Tabla con Colores
+
+### ❌ ANTES (Incorrecto)
+
+```vue
+<template>
+	<table class="w-full border-collapse">
+		<thead>
+			<tr class="bg-blue-600 text-white">
+				<th class="p-3 text-left">Columna 1</th>
+				<th class="p-3 text-left">Columna 2</th>
+			</tr>
+		</thead>
+		<tbody>
+			<tr class="border-b border-gray-200 hover:bg-blue-50">
+				<td class="p-3">Dato 1</td>
+				<td class="p-3">Dato 2</td>
+			</tr>
+		</tbody>
+	</table>
+</template>
+```
+
+**Problemas:**
+
+- ❌ `bg-blue-600` - Header con color genérico
+- ❌ `border-gray-200` - Borde genérico
+- ❌ `hover:bg-blue-50` - Hover genérico
+
+### ✅ DESPUÉS (Correcto)
+
+```vue
+<template>
+	<table class="w-full border-collapse">
+		<thead>
+			<tr class="bg-brand text-white">
+				<th class="p-3 text-left">Columna 1</th>
+				<th class="p-3 text-left">Columna 2</th>
+			</tr>
+		</thead>
+		<tbody>
+			<tr class="border-b border-brand-lighter hover:bg-brand/10">
+				<td class="p-3">Dato 1</td>
+				<td class="p-3">Dato 2</td>
+			</tr>
+		</tbody>
+	</table>
+</template>
+```
+
+**Mejoras:**
+
+- ✅ `bg-brand` - Header con color corporativo
+- ✅ `border-brand-lighter` - Borde con color corporativo
+- ✅ `hover:bg-brand/10` - Hover con opacidad corporativa
+
+---
+
+## 7️⃣ Ejemplo: ERROR COMÚN - Colores Gray con Números
+
+### ❌ ANTES (Incorrecto)
+
+```vue
+<template>
+	<!-- Banner MI PASS -->
+	<section class="bg-brand py-7">
+		<div class="flex items-center gap-3">
+			<!-- Logo con fondo oscuro -->
+			<div class="bg-gray-900 rounded-2xl p-4 w-[80px] h-[80px]">
+				<span class="text-white font-bold">B</span>
+			</div>
+			<h2 class="text-7 font-bold text-white">MI PASS</h2>
+		</div>
+
+		<p class="text-gray-800 mt-4">Descripción</p>
+		<div class="border border-gray-300 rounded p-4">
+			<span class="text-gray-600">Contenido</span>
+		</div>
+	</section>
+</template>
+```
+
+**Problemas:**
+
+- ❌ `bg-gray-900` - **Este color NO EXISTE en el preset**
+- ❌ `text-gray-800` - **Este color NO EXISTE en el preset**
+- ❌ `border-gray-300` - **Este color NO EXISTE en el preset**
+- ❌ `text-gray-600` - **Este color NO EXISTE en el preset**
+
+**¿Por qué fallan?** El preset NO incluye la escala numérica de grises (100, 200, 300... 900). Solo tiene: `gray-dark`, `gray`, `gray-light`, `gray-lighter`, `gray-background`, `gray-transparent`.
+
+### ✅ DESPUÉS (Correcto)
+
+```vue
+<template>
+	<!-- Banner MI PASS -->
+	<section class="bg-brand py-7">
+		<div class="flex items-center gap-3">
+			<!-- Logo con fondo oscuro -->
+			<div class="bg-brand-dark rounded-2xl p-4 w-[80px] h-[80px]">
+				<span class="text-white font-bold">B</span>
+			</div>
+			<h2 class="text-7 font-bold text-white">MI PASS</h2>
+		</div>
+
+		<p class="text-gray-dark mt-4">Descripción</p>
+		<div class="border border-gray-lighter rounded p-4">
+			<span class="text-gray">Contenido</span>
+		</div>
+	</section>
+</template>
+```
+
+**Mejoras:**
+
+- ✅ `bg-brand-dark` - Color oscuro del preset (en lugar de gray-900)
+- ✅ `text-gray-dark` - Gris oscuro del preset (en lugar de gray-800)
+- ✅ `border-gray-lighter` - Gris claro del preset (en lugar de gray-300)
+- ✅ `text-gray` - Gris medio del preset (en lugar de gray-600)
+
+**Guía Rápida de Grises:**
+
+| ❌ Incorrecto  | ✅ Usar en su lugar | Uso                  |
+| -------------- | ------------------- | -------------------- |
+| `gray-900/800` | `brand-dark`        | Fondos muy oscuros   |
+| `gray-700/600` | `gray-dark`         | Textos oscuros       |
+| `gray-500/400` | `gray`              | Textos/bordes medios |
+| `gray-300/200` | `gray-lighter`      | Bordes claros        |
+| `gray-100/50`  | `gray-background`   | Fondos claros        |
+
+---
+
+## 🎯 Resumen de Transformaciones
+
+| Elemento              | ❌ Incorrecto               | ✅ Correcto                      |
+| --------------------- | --------------------------- | -------------------------------- |
+| **Fondo principal**   | `bg-blue-600`               | `bg-brand`                       |
+| **Fondo claro**       | `bg-blue-100`               | `bg-brand-light`                 |
+| **Fondo oscuro**      | `bg-blue-900`               | `bg-brand-dark`                  |
+| **Gradiente**         | `from-blue-400 to-blue-600` | `from-brand-light to-primary`    |
+| **Texto**             | `text-blue-700`             | `text-brand-dark`                |
+| **Borde**             | `border-blue-500`           | `border-brand`                   |
+| **Hover**             | `hover:bg-blue-700`         | `hover:bg-primary-light`         |
+| **Opacidad**          | `bg-[rgba(0,128,192,0.5)]`  | `bg-brand/50`                    |
+| **Gris oscuro (900)** | `bg-gray-900`               | `bg-brand-dark` o `bg-gray-dark` |
+| **Gris texto (700)**  | `text-gray-700`             | `text-gray-dark`                 |
+| **Gris borde (300)**  | `border-gray-300`           | `border-gray-lighter`            |
+| **Gris fondo (100)**  | `bg-gray-100`               | `bg-gray-background`             |
+
+---
+
+## 8️⃣ Ejemplo: Espaciado Incorrecto
+
+### ❌ ANTES (Incorrecto)
+
+```vue
+<template>
+	<div class="p-8 m-10 gap-12">
+		<h2 class="mb-8">Título</h2>
+		<div class="grid grid-cols-3 gap-15">
+			<!-- Contenido -->
+		</div>
+	</div>
+</template>
+```
+
+**Problemas:**
+
+- ❌ `p-8` - NO existe en preset (escala solo 1-7)
+- ❌ `m-10` - NO existe en preset
+- ❌ `gap-12` - NO existe en preset
+- ❌ `mb-8` - NO existe en preset
+- ❌ `gap-15` - NO existe en preset
+
+### ✅ DESPUÉS (Correcto)
+
+```vue
+<template>
+	<div class="p-7 m-[40px] gap-[48px]">
+		<h2 class="mb-[32px]">Título</h2>
+		<div class="grid grid-cols-3 gap-6">
+			<!-- Contenido -->
+		</div>
+	</div>
+</template>
+```
+
+**Mejoras:**
+
+- ✅ `p-7` - Máximo del preset (40px)
+- ✅ `m-[40px]` - Valor arbitrario para 40px (equivalente a m-7)
+- ✅ `gap-[48px]` - Valor arbitrario para valores > 40px
+- ✅ `mb-[32px]` - Valor arbitrario (o usar `mb-6` = 32px)
+- ✅ `gap-6` - Dentro de escala del preset (32px)
+
+**Nota**: También puedes usar `mb-6` en lugar de `mb-[32px]`, ya que 32px = escala 6.
+
+---
+
+## 9️⃣ Ejemplo: Tipografía Fuera de Escala
+
+### ❌ ANTES (Incorrecto)
+
+```vue
+<template>
+	<div>
+		<h1 class="text-5xl font-black">Título Principal</h1>
+		<h2 class="text-9xl font-heavy">Subtítulo Enorme</h2>
+		<p class="text-xxs">Texto muy pequeño</p>
+	</div>
+</template>
+```
+
+**Problemas:**
+
+- ❌ `text-5xl` - Existe, pero mejor usar alias del preset (`text-8` = `text-4xl`)
+- ❌ `font-black` - NO existe en preset (máximo `font-extrabold` = 800)
+- ❌ `text-9xl` - NO existe en preset (máximo `text-8` = 40px)
+- ❌ `font-heavy` - NO existe
+- ❌ `text-xxs` - NO existe
+
+### ✅ DESPUÉS (Correcto)
+
+```vue
+<template>
+	<div>
+		<h1 class="text-8 font-extrabold">Título Principal</h1>
+		<!-- O: text-4xl font-extrabold (equivalente) -->
+
+		<h2 class="text-[56px] font-extrabold leading-[64px]">Subtítulo Enorme</h2>
+		<!-- Valor arbitrario para tamaños > 40px -->
+
+		<p class="text-1">Texto muy pequeño</p>
+		<!-- O: text-xs (equivalente) -->
+	</div>
+</template>
+```
+
+**Mejoras:**
+
+- ✅ `text-8` - Máximo del preset (40px), alias de `text-4xl`
+- ✅ `font-extrabold` - Peso máximo del preset (800)
+- ✅ `text-[56px]` - Valor arbitrario para tamaños > 40px
+- ✅ `leading-[64px]` - Line height arbitrario para equilibrar
+- ✅ `text-1` o `text-xs` - Mínimo del preset (12px)
+
+---
+
+## 🔟 Ejemplo: Breakpoints Incorrectos (Modyo 8 vs Modyo 9)
+
+### ❌ ANTES (Incorrecto - Modyo 8)
+
+```vue
+<template>
+	<div class="grid grid-cols-1 md:grid-cols-2">
+		<!-- Asume md = 770px (Modyo 8) -->
+		<div class="p-4 md:p-6">Contenido</div>
+	</div>
+</template>
+
+<style>
+/* O peor: media queries manuales */
+@media (min-width: 770px) {
+	.custom-layout {
+		display: grid;
+	}
+}
+</style>
+```
+
+**Problemas:**
+
+- ❌ Asume `md:` = 770px (Modyo 8)
+- ❌ Puede causar inconsistencias en layouts
+- ❌ Media queries manuales en vez de Tailwind
+
+### ✅ DESPUÉS (Correcto - Modyo 9)
+
+```vue
+<template>
+	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+		<!-- md = 768px, lg = 1024px, xl = 1280px (Modyo 9) -->
+		<div class="p-4 md:p-5 lg:p-6">Contenido</div>
+	</div>
+</template>
+```
+
+**Mejoras:**
+
+- ✅ Usa breakpoints correctos de Modyo 9 (md = 768px)
+- ✅ Layout progresivo para todos los tamaños
+- ✅ Espaciado adaptativo con escala del preset (4, 5, 6 = 16px, 24px, 32px)
+
+---
+
+## 1️⃣1️⃣ Ejemplo: Animaciones y Transiciones
+
+### ❌ ANTES (Incorrecto)
+
+```vue
+<template>
+	<div class="opacity-0 hover:opacity-100">Sin transición</div>
+
+	<div class="transform scale-100 hover:scale-110">Sin suavizado</div>
+
+	<div class="skeleton-loader">
+		<div class="bg-gray-200 h-20 rounded pulse-animation"></div>
+	</div>
+</template>
+
+<style>
+@keyframes pulse-animation {
+	0%,
+	100% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0.5;
+	}
+}
+.pulse-animation {
+	animation: pulse-animation 2s infinite;
+}
+</style>
+```
+
+**Problemas:**
+
+- ❌ No usa transiciones del preset
+- ❌ Define animaciones manualmente en CSS
+- ❌ No aprovecha `animate-*` del preset
+- ❌ `duration-*` o `ease-*` ausentes
+
+### ✅ DESPUÉS (Correcto)
+
+```vue
+<template>
+	<!-- Transición suave con preset -->
+	<div class="opacity-0 hover:opacity-100 transition-opacity duration-500 ease-emphasized">Con transición suave</div>
+
+	<!-- Transform con transición -->
+	<div class="scale-100 hover:scale-110 transition-transform duration-300 ease-out">Con suavizado</div>
+
+	<!-- Skeleton loader con animación predefinida -->
+	<div class="skeleton-loader">
+		<div class="bg-gray-lighter h-20 rounded animate-skeleton"></div>
+	</div>
+
+	<!-- Entrada gradual -->
+	<div class="animate-fadeInUp">Elemento que entra desde abajo</div>
+
+	<!-- Spinner de carga -->
+	<i class="icos-loading animate-spin text-brand"></i>
+</template>
+```
+
+**Mejoras:**
+
+- ✅ `transition-opacity duration-500 ease-emphasized` - Transición del preset
+- ✅ `transition-transform duration-300 ease-out` - Timing function del preset
+- ✅ `animate-skeleton` - Animación predefinida para skeleton loaders
+- ✅ `animate-fadeInUp` - Animación de entrada del preset
+- ✅ `animate-spin` - Spinner del preset
+- ✅ NO requiere CSS manual
+
+---
+
+## 1️⃣2️⃣ Ejemplo: Bordes y Sombras
+
+### ❌ ANTES (Incorrecto)
+
+```vue
+<template>
+	<div class="border-4 border-blue-500 rounded-3xl shadow-2xl">Card con bordes genéricos</div>
+
+	<button class="rounded-[20px] shadow-lg border-[3px] border-gray-400">Botón con valores inconsistentes</button>
+</template>
+```
+
+**Problemas:**
+
+- ❌ `border-4` - NO existe en preset (solo border, border-2)
+- ❌ `border-blue-500` - Color genérico
+- ❌ `rounded-3xl` - NO existe en preset (máximo `rounded-3` = 16px)
+- ❌ `shadow-2xl` - Existe, pero puede preferir `shadow-xl` del preset
+- ❌ `rounded-[20px]` - Valor arbitrario innecesario
+- ❌ `border-[3px]` - NO existe grosor 3px en preset
+
+### ✅ DESPUÉS (Correcto)
+
+```vue
+<template>
+	<div class="border-2 border-brand rounded-3 shadow-md">Card con bordes corporativos</div>
+
+	<button class="rounded-full shadow-controls border border-brand-light">Botón consistente</button>
+
+	<!-- Si realmente necesitas valores específicos -->
+	<div class="border-[3px] border-brand rounded-[20px] shadow-xl">Card con valores arbitrarios específicos</div>
+</template>
+```
+
+**Mejoras:**
+
+- ✅ `border-2` - Grosor disponible en preset
+- ✅ `border-brand` - Color corporativo
+- ✅ `rounded-3` - Radio máximo del preset (16px)
+- ✅ `shadow-md`, `shadow-controls` - Sombras del preset
+- ✅ `rounded-full` - Para botones completamente redondos
+- ✅ Valores arbitrarios solo cuando son requerimientos específicos de diseño
+
+---
+
+## 🎯 Resumen Ampliado de Transformaciones
+
+| Categoría             | ❌ Incorrecto               | ✅ Correcto                           |
+| --------------------- | --------------------------- | ------------------------------------- |
+| **Colores**           | `bg-blue-600`               | `bg-brand`                            |
+| **Gradientes**        | `from-blue-400 to-blue-600` | `from-brand-light to-primary`         |
+| **Espaciado > 40px**  | `p-8`, `m-10`               | `p-[48px]`, `m-[80px]` (arbitrarios)  |
+| **Espaciado ≤ 40px**  | -                           | `p-1` a `p-7` (4px a 40px)            |
+| **Tipografía > 40px** | `text-5xl`, `text-9xl`      | `text-[48px]`, `text-[64px]`          |
+| **Tipografía ≤ 40px** | -                           | `text-1` a `text-8` (12px a 40px)     |
+| **Font Weight**       | `font-black` (900)          | `font-extrabold` (800 - máximo)       |
+| **Breakpoints**       | md = 770px (Modyo 8)        | md = 768px (Modyo 9)                  |
+| **Border Width**      | `border-4`                  | `border-2` o `border-[4px]`           |
+| **Border Radius**     | `rounded-3xl`               | `rounded-3` (16px) o `rounded-[20px]` |
+| **Animaciones**       | CSS manual                  | `animate-fadeIn`, `animate-skeleton`  |
+| **Transiciones**      | Sin especificar             | `duration-300 ease-out`               |
+| **Sombras**           | -                           | `shadow-md`, `shadow-controls`        |
+
+---
+
+## 💡 Proceso de Conversión Ampliado
+
+## 💡 Proceso de Conversión Ampliado
+
+Cuando recibas código incorrecto:
+
+1. **Identifica** problemas:
+
+    - Colores genéricos (blue-X, gray-X, red-X, etc)
+    - Espaciado fuera de rango (p-8, m-10, gap-12)
+    - Tipografía fuera de escala (text-5xl, text-9xl)
+    - Pesos de fuente inexistentes (font-black)
+    - Breakpoints de Modyo 8 (770px)
+    - Animaciones/transiciones manuales en CSS
+
+2. **Reemplaza** con equivalentes del preset:
+
+    - **Colores**: `blue-*` → `brand` o `primary`
+    - **Espaciado**:
+        - Si ≤ 40px → Usar escala 1-7
+        - Si > 40px → Usar arbitrarios: `p-[48px]`
+    - **Tipografía**:
+        - Si ≤ 40px → Usar `text-1` a `text-8`
+        - Si > 40px → Usar arbitrarios: `text-[48px]`
+    - **Font Weight**: Máximo `font-extrabold` (800)
+    - **Breakpoints**: md = 768px (NO 770px)
+    - **Animaciones**: Usar `animate-*` predefinidas
+
+3. **Verifica** uso correcto:
+
+    - Gradientes usen colores preset
+    - Transiciones incluyan `duration-*` y `ease-*`
+    - Bordes usen valores disponibles o arbitrarios
+    - Sombras usen tokens del preset
+
+4. **Agrega** valores arbitrarios SOLO si:
+    - No existe valor equivalente en preset
+    - Es un requerimiento específico de diseño
+    - Se documenta el motivo (comentario en código)
+
+---
+
+## 🚀 Checklist Final Ampliado
+
+Antes de considerar una maqueta "lista":
+
+### Colores
+
+- [ ] ¿Todos los fondos usan `brand` o variantes?
+- [ ] ¿Los gradientes combinan colores corporativos?
+- [ ] ¿Los textos usan tonalidades coherentes?
+- [ ] ¿Los bordes usan colores del preset?
+
+### Espaciado y Tipografía
+
+- [ ] ¿El espaciado usa escala 1-7 (4px-40px)?
+- [ ] ¿Valores > 40px usan arbitrarios: `p-[48px]`?
+- [ ] ¿La tipografía usa `text-1` a `text-8`?
+- [ ] ¿Tamaños > 40px usan arbitrarios: `text-[48px]`?
+- [ ] ¿Font weights no exceden `font-extrabold` (800)?
+
+### Responsive
+
+- [ ] ¿Los breakpoints usan valores de Modyo 9 (md = 768px)?
+- [ ] ¿El layout es progresivo (sm, md, lg, xl)?
+- [ ] ¿El espaciado se adapta por breakpoint?
+
+### Interactividad
+
+- [ ] ¿Los estados (hover, active, focus) tienen transiciones?
+- [ ] ¿Las transiciones usan `duration-*` y `ease-*` del preset?
+- [ ] ¿Las animaciones usan `animate-*` predefinidas?
+- [ ] ¿Los skeleton loaders usan `animate-skeleton` o `animate-pulse`?
+
+### Bordes y Sombras
+
+- [ ] ¿Los bordes usan `border` o `border-2`?
+- [ ] ¿Los radios usan `rounded-1/2/3` o `rounded-full`?
+- [ ] ¿Las sombras usan tokens del preset?
+
+### Consistencia
+
+- [ ] ¿Hay consistencia visual con otras páginas?
+- [ ] ¿Los IDs están presentes en elementos interactivos? (analytics)
+- [ ] ¿Los valores arbitrarios están documentados?