libreria-astro-lefebvre 0.1.145 → 0.1.151

package/README.md

@@ -156,12 +156,36 @@ Los tamaños, pesos e interlineados ya van dentro de cada componente según la t
 
 > ⚠️ **Cambio que afecta al aspecto de los portales existentes.** Al actualizar a esta versión sin haber definido las clases anteriores, los textos pierden la tipografía de marca. Actualiza el portal y la librería a la vez.
 
-**Color de marca:** el azul digital `#2134F1` pasa al azul corporativo `#001978` en botones (relleno, borde y etiqueta), iconos y cabeceras. Los degradados con rosa se han sustituido por `#001978` plano. El hover de los botones rellenos es una capa blanca `rgba(255, 255, 255, 0.10)`.
+**Color de marca (marca 2026):** el rojo `#d71635` sustituye al azul corporativo `#001978` en botones (relleno, borde y etiqueta), iconos y cabeceras. Texto fuerte `#1b1b1b`, texto débil `#403830`, filetes `#e1c8b4`, fondos alternativos `#ebe7da`. Sin degradados. El hover de los botones rellenos es una capa blanca `rgba(255, 255, 255, 0.10)`.
 
 ---
 
 ## Bitácora de cambios
 
+### 05/11/2026
+
+#### Cambio de marca 2026: rojo y beige
+
+Mismos valores que `genial-astro` (rama `feature/PWEB-26914-rediseo-rojo`), en hex directo dentro de los componentes.
+
+| Antes | Ahora | Rol |
+|---|---|---|
+| `#001978` | `#d71635` | marca |
+| `#262626` / `#020618` / `#00092C` | `#1b1b1b` | texto fuerte |
+| `#363942` / `#627384` | `#403830` | texto débil |
+| `#b6b7bb` / `#e0e0e0` / `#ccd1e4` / `#dde0ec` (bordes) | `#e1c8b4` | filete |
+| `#5f6168` | `#6d5e52` | filete fuerte |
+| `#f2f3f8` / `#f2f2f2` / `#f5f6fa` / `#dde0ec` (fondos) | `#ebe7da` | fondo alternativo |
+| `rgba(0, 25, 120, x)` / `rgba(0, 23, 114, x)` | `rgba(107, 58, 8, x)` | relleno cálido |
+
+- Footers `Footer_2025/2026/2027_Napoles`: ahora sobre `#1b1b1b`, titulares en sans, enlaces subrayados y logo en blanco (`brightness-0 invert`). Sin la banda roja inferior.
+- `Contenido_2026_Mostoles`: con imagen de fondo el botón lleva fondo blanco (el rojo sobre foto no cumple contraste).
+- Listas de color de `Titulo_2025_Algeciras` y `Mapa_2026_Girona` en beige; los valores guardados con los hex antiguos se siguen pintando tal cual, pero el selector de Mecano puede mostrarlos vacíos.
+- `Formulario_2026_Wichita`: degradado azul sustituido por `#ebe7da` plano.
+- Grises y slate de Tailwind en fondos y bordes (`bg-gray-*`, `border-gray-*`, `bg-slate-*`) → `#ebe7da`, `#e1c8b4` y `#fafaf5`; rojos y rosas de Tailwind → `#d71635`, `#71131f` y `#fff0eb`. Los grises de texto y las variantes `dark:` no se han tocado.
+- Textos de ayuda y descripciones de los carbins actualizados al nuevo color.
+- Pendiente fuera de esta librería: los formularios los inyecta LF2; el borde de los campos sobre blanco debe ser `#6d5e52` (1.4.11).
+
 ### 16/10/2026
 
 #### Cambio de marca: tipografía y color

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "libreria-astro-lefebvre",
-  "version": "0.1.145",
+  "version": "0.1.151",
   "description": "Librería de componentes Astro, React y Vue para Lefebvre",
   "author": "Equipo web desarrollo Lefebvre",
   "type": "module",

package/src/carbins/Author_2025_Algarve.ts

@@ -12,7 +12,7 @@ export const metadata: ComponentMetadata = {
     {
       name: 'nameAuthor',
       type: 'text',
-      help: 'Nombre del autor. Se renderiza como párrafo subrayado (IBM Plex Sans 16px color #262626) y admite HTML (set:html). Conviene que ocupe una sola línea',
+      help: 'Nombre del autor. Se renderiza como párrafo subrayado (IBM Plex Sans 16px color #1b1b1b) y admite HTML (set:html). Conviene que ocupe una sola línea',
       label: 'Nombre del autor',
       mandatory: false,
       example_value: 'María García López'
@@ -28,7 +28,7 @@ export const metadata: ComponentMetadata = {
     {
       name: 'descriptionAuthor',
       type: 'text',
-      help: 'Profesión o descripción del autor. Se renderiza como párrafo (IBM Plex Sans 14px color #363942) debajo del nombre y admite HTML (set:html). Conviene que ocupe una sola línea',
+      help: 'Profesión o descripción del autor. Se renderiza como párrafo (IBM Plex Sans 14px color #403830) debajo del nombre y admite HTML (set:html). Conviene que ocupe una sola línea',
       label: 'Descripción del autor',
       mandatory: false,
       example_value: 'Abogada especialista en Derecho Fiscal con 15 años de experiencia'

package/src/carbins/Boton_2026_Elx.ts

@@ -4,7 +4,7 @@ export const metadata: ComponentMetadata = {
   component_name: 'Boton_2026_Elx',
   category: 'CTA',
   name: 'Grupo de botones inline primario/secundario con icono opcional 2026',
-  description: 'Fila de uno o varios botones colocados inline (con salto de línea si no caben). Cada botón puede ser Primario (fondo azul #001978, texto blanco) o Secundario (fondo blanco, borde y texto azul #001978), ambos de 48px de alto, esquinas de 8px y sombra suave, según el diseño de Figma. Opcionalmente muestra un icono de "abrir" a la derecha del texto. Cada botón puede navegar a una URL o abrir un modal con formulario LF2 (el mismo modal de Contenido_2025_Malaga, compartido por todos los botones marcados como modal). Siempre renderiza al menos un botón',
+  description: 'Fila de uno o varios botones colocados inline (con salto de línea si no caben). Cada botón puede ser Primario (fondo rojo #d71635, texto blanco) o Secundario (fondo blanco, borde y texto rojo #d71635), ambos de 48px de alto, esquinas de 8px y sombra suave, según el diseño de Figma. Opcionalmente muestra un icono de "abrir" a la derecha del texto. Cada botón puede navegar a una URL o abrir un modal con formulario LF2 (el mismo modal de Contenido_2025_Malaga, compartido por todos los botones marcados como modal). Siempre renderiza al menos un botón',
   framework: 'Astro',
   priority: 1,
   tags: ['boton', 'cta', 'botones', 'inline', 'primario', 'secundario', 'modal', 'formulario', 'lf2'],
@@ -29,7 +29,7 @@ export const metadata: ComponentMetadata = {
             name: 'type',
             type: 'select',
             label: 'Tipo de botón',
-            help: 'Primario: fondo azul y texto blanco. Secundario: fondo blanco con borde y texto azul',
+            help: 'Primario: fondo rojo y texto blanco. Secundario: fondo blanco con borde y texto rojo',
             options: ['primary', 'secondary'],
             options_labels: ['Primario', 'Secundario'],
             example_value: 'primary'

package/src/carbins/CTA_2025_Formentera.ts

@@ -4,7 +4,7 @@ export const metadata: ComponentMetadata = {
   component_name: 'CTA_2025_Formentera',
   category: 'CTA',
   name: 'Botón CTA con colores de texto y fondo intercambiables en hover 2025',
-  description: 'Botón Call To Action cuyo color de texto y color de fondo se intercambian automáticamente al hacer hover (p. ej. blanco sobre azul → azul sobre blanco). Acepta nombres CSS o códigos hex para los tres colores (texto, fondo, borde). El borde NO cambia en hover. El botón se ajusta al ancho de su contenido (w-fit)',
+  description: 'Botón Call To Action cuyo color de texto y color de fondo se intercambian automáticamente al hacer hover (p. ej. blanco sobre rojo → rojo sobre blanco). Acepta nombres CSS o códigos hex para los tres colores (texto, fondo, borde). El borde NO cambia en hover. El botón se ajusta al ancho de su contenido (w-fit)',
   framework: 'Astro',
   priority: 1,
   tags: ['boton', 'cta', 'hover', 'personalizable'],
@@ -28,7 +28,7 @@ export const metadata: ComponentMetadata = {
     {
       name: 'frontColor',
       type: 'text',
-      help: 'Color del texto en reposo (y del fondo al hacer hover). Acepta nombre CSS (ej. "white", "black") o código hex (ej. "#001978"). En hover, este valor y "Color de fondo" se intercambian',
+      help: 'Color del texto en reposo (y del fondo al hacer hover). Acepta nombre CSS (ej. "white", "black") o código hex (ej. "#d71635"). En hover, este valor y "Color de fondo" se intercambian',
       label: 'Color del texto (frontal)',
       mandatory: false,
       example_value: '#ffffff'
@@ -39,7 +39,7 @@ export const metadata: ComponentMetadata = {
       help: 'Color de fondo en reposo (y del texto al hacer hover). Acepta nombre CSS o código hex. En hover, este valor y "Color del texto" se intercambian',
       label: 'Color de fondo',
       mandatory: false,
-      example_value: '#001978'
+      example_value: '#d71635'
     },
     {
       name: 'borderColor',
@@ -47,7 +47,7 @@ export const metadata: ComponentMetadata = {
       help: 'Color del borde del botón (1px sólido). Acepta nombre CSS o código hex. NO cambia en hover',
       label: 'Color del borde',
       mandatory: false,
-      example_value: '#001978'
+      example_value: '#d71635'
     },
    ]
 };

package/src/carbins/Calculadora_2026_Lisboa.ts

@@ -4,7 +4,7 @@ export const metadata: ComponentMetadata = {
   component_name: 'Calculadora_2026_Lisboa',
   category: 'Contenido de Imagen',
   name: 'Sección a dos columnas con etiqueta, título, descripción, texto, botón e imagen lateral 2026',
-  description: 'Sección de contenido con fondo de gradiente cónico suave, una etiqueta tipo badge (fondo azul translúcido) al 100% de ancho en la parte superior y, debajo, un bloque a dos columnas: en la izquierda el título (h2), la descripción, un texto enriquecido (editor, con listas desordenadas renderizadas con icono de check azul) y un botón primario opcional; en la derecha una imagen centrada. Las columnas se alinean verticalmente al centro con flex y colapsan a una sola columna en móvil',
+  description: 'Sección de contenido con fondo de gradiente cónico suave, una etiqueta tipo badge (fondo beige translúcido) al 100% de ancho en la parte superior y, debajo, un bloque a dos columnas: en la izquierda el título (h2), la descripción, un texto enriquecido (editor, con listas desordenadas renderizadas con icono de check rojo) y un botón primario opcional; en la derecha una imagen centrada. Las columnas se alinean verticalmente al centro con flex y colapsan a una sola columna en móvil',
   framework: 'Astro',
   priority: 1,
   tags: ['contenido', 'imagen', 'texto', 'dos columnas', 'calculadora', 'etiqueta', 'boton', 'cta'],
@@ -12,7 +12,7 @@ export const metadata: ComponentMetadata = {
     {
       name: 'tag',
       type: 'text',
-      help: 'Etiqueta superior (badge con fondo azul translúcido) que ocupa el 100% del ancho por encima del bloque a dos columnas. Si se deja vacía, NO se muestra',
+      help: 'Etiqueta superior (badge con fondo beige translúcido) que ocupa el 100% del ancho por encima del bloque a dos columnas. Si se deja vacía, NO se muestra',
       label: 'Etiqueta',
       mandatory: false,
       example_value: 'Calculadora'

package/src/carbins/Card_2025_Malta.ts

@@ -4,7 +4,7 @@ export const metadata: ComponentMetadata = {
   component_name: 'Card_2025_Malta',
   category: 'Contenido con listas',
   name: 'Grid responsive de cards minimalistas solo-título 2025',
-  description: 'Grid responsive (1 columna en móvil, 2 en tablet, 4 en desktop) de cards minimalistas que contienen únicamente un título h3 centrado, sin imagen ni descripción. Toda la card es clicable (navega al URL indicado) y muestra un borde degradado corporativo (indigo → azul → rosa) al hacer hover',
+  description: 'Grid responsive (1 columna en móvil, 2 en tablet, 4 en desktop) de cards minimalistas que contienen únicamente un título h3 centrado, sin imagen ni descripción. Toda la card es clicable (navega al URL indicado) y muestra un borde rojo corporativo al hacer hover',
   framework: 'Astro',
   priority: 1,
   tags: ['contenido', 'card', 'grid', 'clicable', 'minimalista'],

package/src/carbins/Contenido_2025_Montevideo.ts

@@ -4,7 +4,7 @@ export const metadata: ComponentMetadata = {
   component_name: 'Contenido_2025_Montevideo',
   category: 'Contenido de Imagen',
   name: 'Card clicable con imagen, tag, título, descripción y autor 2025',
-  description: 'Card individual totalmente clicable (la card entera es un enlace, no solo un botón) con imagen superior, etiqueta tipo badge opcional, título h3, descripción y línea de autor opcional. Muestra un borde degradado corporativo (indigo → azul → rosa) al hacer hover. Diseñada para usarse como unidad base dentro de grids como Contenido_2026_Estocolmo o Contenido_2026_Seattle',
+  description: 'Card individual totalmente clicable (la card entera es un enlace, no solo un botón) con imagen superior, etiqueta tipo badge opcional, título h3, descripción y línea de autor opcional. Muestra un borde rojo corporativo al hacer hover. Diseñada para usarse como unidad base dentro de grids como Contenido_2026_Estocolmo o Contenido_2026_Seattle',
   framework: 'Astro',
   priority: 1,
   tags: ['contenido', 'card', 'imagen', 'clicable', 'autor', 'badge'],

package/src/carbins/Contenido_2026_Denia.ts

@@ -12,7 +12,7 @@ export const metadata: ComponentMetadata = {
     {
       name: 'title',
       type: 'text',
-      help: 'Título principal del bloque (se renderiza como h2 en IBM Plex Serif 28px en móvil / 32px en desktop, color #262626). Admite HTML. También se inyecta en los datos estructurados (schema.org) como nombre del elemento',
+      help: 'Título principal del bloque (se renderiza como h2 en IBM Plex Serif 28px en móvil / 32px en desktop, color #1b1b1b). Admite HTML. También se inyecta en los datos estructurados (schema.org) como nombre del elemento',
       label: 'Texto del título',
       mandatory: false,
       example_value: 'Calculadora de productividad con IA jurídica'
@@ -20,7 +20,7 @@ export const metadata: ComponentMetadata = {
     {
       name: 'description',
       type: 'text',
-      help: 'Descripción que aparece debajo del título (IBM Plex Sans 16px, color #363942). Admite HTML. También se inyecta en los datos estructurados (schema.org) como descripción del elemento (con etiquetas HTML eliminadas automáticamente)',
+      help: 'Descripción que aparece debajo del título (IBM Plex Sans 16px, color #403830). Admite HTML. También se inyecta en los datos estructurados (schema.org) como descripción del elemento (con etiquetas HTML eliminadas automáticamente)',
       label: 'Texto de la descripción',
       mandatory: false,
       example_value: 'Estima cuántas horas de trabajo puede ahorrarte la inteligencia artificial aplicada al Derecho en tu despacho.'
@@ -28,7 +28,7 @@ export const metadata: ComponentMetadata = {
     {
       name: 'contentHTML',
       type: 'textArea',
-      help: 'Contenido HTML adicional que se renderiza debajo de la descripción (admite <p>, <h2>, <ul>, <strong>, etc.). Se aplican estilos globales: <p> internos en IBM Plex Sans 1em color #363942 y <h2> internos en IBM Plex Serif 1.5em semibold color #262626. Si se deja vacío, no se renderiza el bloque',
+      help: 'Contenido HTML adicional que se renderiza debajo de la descripción (admite <p>, <h2>, <ul>, <strong>, etc.). Se aplican estilos globales: <p> internos en IBM Plex Sans 1em color #403830 y <h2> internos en IBM Plex Serif 1.5em semibold color #1b1b1b. Si se deja vacío, no se renderiza el bloque',
       label: 'Contenido HTML adicional',
       mandatory: false,
       example_value: '<p>Incluye fórmulas configurables y exporta el resultado a PDF.</p>'

package/src/carbins/Contenido_2026_Huesca.ts

@@ -4,7 +4,7 @@ export const metadata: ComponentMetadata = {
   component_name: 'Contenido_2026_Huesca',
   category: 'Contenido de Imagen',
   name: 'Sección a dos columnas con etiqueta, título, descripción, texto, botón e imagen o vídeo lateral 2026',
-  description: 'Sección de contenido con fondo de degradado cónico suave, una etiqueta tipo badge (fondo azul translúcido) al 100% de ancho en la parte superior y, debajo, un bloque a dos columnas: en la izquierda el título (h2), la descripción, un texto enriquecido (editor, con listas desordenadas renderizadas con icono de check azul) y un botón primario opcional; en la derecha una imagen o un vídeo centrados (mutuamente exclusivos: si hay vídeo se muestra el vídeo, si no, la imagen). Las columnas se alinean verticalmente al centro con flex y colapsan a una sola columna en móvil',
+  description: 'Sección de contenido con fondo de degradado cónico suave, una etiqueta tipo badge (fondo beige translúcido) al 100% de ancho en la parte superior y, debajo, un bloque a dos columnas: en la izquierda el título (h2), la descripción, un texto enriquecido (editor, con listas desordenadas renderizadas con icono de check rojo) y un botón primario opcional; en la derecha una imagen o un vídeo centrados (mutuamente exclusivos: si hay vídeo se muestra el vídeo, si no, la imagen). Las columnas se alinean verticalmente al centro con flex y colapsan a una sola columna en móvil',
   framework: 'Astro',
   priority: 1,
   tags: ['contenido', 'imagen', 'video', 'texto', 'dos columnas', 'etiqueta', 'boton', 'cta'],
@@ -12,7 +12,7 @@ export const metadata: ComponentMetadata = {
     {
       name: 'tag',
       type: 'text',
-      help: 'Etiqueta superior (badge con fondo azul translúcido) que ocupa el 100% del ancho por encima del bloque a dos columnas. Si se deja vacía, NO se muestra',
+      help: 'Etiqueta superior (badge con fondo beige translúcido) que ocupa el 100% del ancho por encima del bloque a dos columnas. Si se deja vacía, NO se muestra',
       label: 'Etiqueta',
       mandatory: false,
       example_value: 'Calculadora'

package/src/carbins/Contenido_2026_Lleida.ts

@@ -164,7 +164,7 @@ export const metadata: ComponentMetadata = {
             name: 'type',
             type: 'select',
             label: 'Tipo de botón',
-            help: 'Primario: fondo azul y texto blanco. Secundario: fondo blanco con borde y texto azul',
+            help: 'Primario: fondo rojo y texto blanco. Secundario: fondo blanco con borde y texto rojo',
             options: ['primary', 'secondary'],
             options_labels: ['Primario', 'Secundario'],
             example_value: 'primary'

package/src/carbins/Contenido_2026_Marruecos.ts

@@ -3,11 +3,11 @@ import type { ComponentMetadata } from '../interfaces/types';
 export const metadata: ComponentMetadata = {
   component_name: 'Contenido_2026_Marruecos',
   category: 'Contenido con listas',
-  name: 'Caja con borde degradado, ítems con icono SVG y CTA siempre visible 2026',
-  description: 'Caja rectangular con borde degradado corporativo que contiene título h2, listado de ítems apilados verticalmente (cada uno con icono SVG de 3 variantes fijas — chat, libro o check — subtítulo h3 y descripción) y un botón CTA en la esquina inferior. IMPORTANTE: el botón se renderiza SIEMPRE (no hay toggle para ocultarlo); si el texto está vacío aparece un botón sin label',
+  name: 'Caja con borde rojo, ítems con icono SVG y CTA siempre visible 2026',
+  description: 'Caja rectangular con borde rojo corporativo que contiene título h2, listado de ítems apilados verticalmente (cada uno con icono SVG de 3 variantes fijas — chat, libro o check — subtítulo h3 y descripción) y un botón CTA en la esquina inferior. IMPORTANTE: el botón se renderiza SIEMPRE (no hay toggle para ocultarlo); si el texto está vacío aparece un botón sin label',
   framework: 'Astro',
   priority: 1,
-  tags: ['contenido', 'icono', 'card', 'cta', 'boton', 'gradiente'],
+  tags: ['contenido', 'icono', 'card', 'cta', 'boton'],
   fields: [
     {
       name: 'title',
@@ -42,7 +42,7 @@ export const metadata: ComponentMetadata = {
       items: {
         type: 'object',
         fields: [
-            { name: 'icon', type: 'select', help: 'Icono del item (SVG con gradiente de color). Solo se reconocen 3 valores: "chat" (burbuja de chat), "book" (libro) y "check" (marca de verificación). Si se elige cualquier otro valor, no aparece ningún icono y el hueco queda vacío', label: 'Icono', options: ['chat', 'book', 'check'], options_labels: ['Chat', 'Libro', 'Check'], example_value: 'chat' },
+            { name: 'icon', type: 'select', help: 'Icono del item (SVG en rojo corporativo). Solo se reconocen 3 valores: "chat" (burbuja de chat), "book" (libro) y "check" (marca de verificación). Si se elige cualquier otro valor, no aparece ningún icono y el hueco queda vacío', label: 'Icono', options: ['chat', 'book', 'check'], options_labels: ['Chat', 'Libro', 'Check'], example_value: 'chat' },
             { name: 'subtitle', type: 'text', help: 'Subtítulo del item (h3). Se renderiza siempre; si se deja vacío, aparece el h3 vacío. No admite HTML', label: 'Subtítulo', example_value: 'Asistente conversacional' },
             { name: 'description', type: 'textArea', help: 'Descripción del item. Se renderiza siempre como párrafo; si se deja vacía, aparece el párrafo vacío. No admite HTML', label: 'Descripción', example_value: 'Consulta jurisprudencia y doctrina en lenguaje natural, sin necesidad de construir queries complejas' }
         ]

package/src/carbins/Contenido_2026_Moraira.ts

@@ -4,7 +4,7 @@ export const metadata: ComponentMetadata = {
   component_name: 'Contenido_2026_Moraira',
   category: 'Contenido de Imagen',
   name: 'Banner CTA con imagen de fondo y overlay translúcido para legibilidad del texto',
-  description: 'Banner CTA con dos variantes alternativas según el toggle "Mostrar imagen" y si hay imagen. Variante 1 (imagen activada y URL rellena): imagen de fondo cover con texto oscuro (#262626/#363942) superpuesto. Si se marca "Imagen oscura", el bloque de texto aparece dentro de una caja translúcida blanca al 50% con backdrop-blur para garantizar legibilidad; si no, el texto va directamente sobre la imagen (apto para imágenes claras). Variante 2 (imagen desactivada o URL vacía): layout alternativo con borde degradado corporativo y fondo blanco. Incluye botón primario configurable y botón secundario que abre modal con formulario LF2 inyectado dinámicamente',
+  description: 'Banner CTA con dos variantes alternativas según el toggle "Mostrar imagen" y si hay imagen. Variante 1 (imagen activada y URL rellena): imagen de fondo cover con texto oscuro (#1b1b1b/#403830) superpuesto. Si se marca "Imagen oscura", el bloque de texto aparece dentro de una caja translúcida blanca al 50% con backdrop-blur para garantizar legibilidad; si no, el texto va directamente sobre la imagen (apto para imágenes claras). Variante 2 (imagen desactivada o URL vacía): layout alternativo con borde rojo corporativo y fondo blanco. Incluye botón primario configurable y botón secundario que abre modal con formulario LF2 inyectado dinámicamente',
   framework: 'Astro',
   priority: 1,
   tags: ['contenido', 'imagen', 'banner', 'cta', 'boton', 'modal', 'formulario', 'lf2', 'overlay', 'backdrop-blur'],
@@ -54,7 +54,7 @@ export const metadata: ComponentMetadata = {
     {
       name: 'showImage',
       type: 'boolean',
-      help: 'Activa/desactiva la imagen de fondo. Si ESTÁ ACTIVADO y "Imagen" tiene valor → layout con imagen de fondo cover y caja translúcida blanca con blur detrás del texto para garantizar legibilidad. Si ESTÁ DESACTIVADO o "Imagen" vacía → layout alternativo con borde degradado corporativo y fondo blanco',
+      help: 'Activa/desactiva la imagen de fondo. Si ESTÁ ACTIVADO y "Imagen" tiene valor → layout con imagen de fondo cover y caja translúcida blanca con blur detrás del texto para garantizar legibilidad. Si ESTÁ DESACTIVADO o "Imagen" vacía → layout alternativo con borde rojo corporativo y fondo blanco',
       label: 'Mostrar imagen',
       mandatory: false,
       options: ['false', 'true'],
@@ -64,7 +64,7 @@ export const metadata: ComponentMetadata = {
     {
       name: 'src',
       type: 'image',
-      help: 'URL de la imagen de fondo. Solo se usa cuando "Mostrar imagen" está activado. Si se deja vacía, se activa el layout alternativo con borde degradado',
+      help: 'URL de la imagen de fondo. Solo se usa cuando "Mostrar imagen" está activado. Si se deja vacía, se activa el layout alternativo con borde rojo',
       label: 'Imagen',
       mandatory: false,
       example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-w-3-4.png'

package/src/carbins/Contenido_2026_Mostoles.ts

@@ -3,8 +3,8 @@ import type { ComponentMetadata } from '../interfaces/types';
 export const metadata: ComponentMetadata = {
   component_name: 'Contenido_2026_Mostoles',
   category: 'Contenido de Imagen',
-  name: 'Banner CTA con doble variante: imagen de fondo con logo o borde azul 2026',
-  description: 'Banner CTA con dos variantes alternativas según el toggle "Mostrar imagen" y si hay imagen. Variante 1 (imagen activada y URL rellena): imagen de fondo cover sin borde y con el logo grande centrado (se puede ocultar con "Mostrar logo"). Variante 2 (imagen desactivada o URL vacía): fondo blanco con borde azul corporativo de 1px y sin logo. Incluye botón primario configurable y botón secundario que abre modal con formulario LF2 inyectado dinámicamente',
+  name: 'Banner CTA con doble variante: imagen de fondo con logo o borde rojo 2026',
+  description: 'Banner CTA con dos variantes alternativas según el toggle "Mostrar imagen" y si hay imagen. Variante 1 (imagen activada y URL rellena): imagen de fondo cover sin borde y con el logo grande centrado (se puede ocultar con "Mostrar logo"). Variante 2 (imagen desactivada o URL vacía): fondo blanco con borde rojo corporativo de 1px y sin logo. Incluye botón primario configurable y botón secundario que abre modal con formulario LF2 inyectado dinámicamente',
   framework: 'Astro',
   priority: 1,
   tags: ['contenido', 'imagen', 'banner', 'cta', 'boton', 'modal', 'formulario', 'lf2', 'logo'],
@@ -64,7 +64,7 @@ export const metadata: ComponentMetadata = {
     {
       name: 'showImage',
       type: 'boolean',
-      help: 'Activa/desactiva la imagen de fondo. Si ESTÁ ACTIVADO y "Imagen" tiene valor → layout con imagen de fondo cover, sin borde y con el logo grande (si "Mostrar logo" está activado). Si ESTÁ DESACTIVADO o "Imagen" vacía → layout alternativo con fondo blanco y borde azul, sin logo',
+      help: 'Activa/desactiva la imagen de fondo. Si ESTÁ ACTIVADO y "Imagen" tiene valor → layout con imagen de fondo cover, sin borde y con el logo grande (si "Mostrar logo" está activado). Si ESTÁ DESACTIVADO o "Imagen" vacía → layout alternativo con fondo blanco y borde rojo, sin logo',
       label: 'Mostrar imagen',
       mandatory: false,
       options: ['false', 'true'],
@@ -74,7 +74,7 @@ export const metadata: ComponentMetadata = {
     {
       name: 'showLogo',
       type: 'boolean',
-      help: 'Activa o desactiva el logo grande centrado. Solo aparece en la variante con imagen de fondo ("Mostrar imagen" activado e "Imagen" rellena); en la variante con borde azul nunca se muestra. Por defecto está activado',
+      help: 'Activa o desactiva el logo grande centrado. Solo aparece en la variante con imagen de fondo ("Mostrar imagen" activado e "Imagen" rellena); en la variante con borde rojo nunca se muestra. Por defecto está activado',
       label: 'Mostrar logo',
       mandatory: false,
       options: ['false', 'true'],
@@ -84,7 +84,7 @@ export const metadata: ComponentMetadata = {
     {
       name: 'src',
       type: 'image',
-      help: 'URL de la imagen de fondo. Solo se usa cuando "Mostrar imagen" está activado. Si se deja vacía, se activa el layout alternativo con fondo blanco y borde azul, sin logo',
+      help: 'URL de la imagen de fondo. Solo se usa cuando "Mostrar imagen" está activado. Si se deja vacía, se activa el layout alternativo con fondo blanco y borde rojo, sin logo',
       label: 'Imagen',
       mandatory: false,
       example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-w-3-4.png'

package/src/carbins/Contenido_2026_Quito.ts

@@ -4,7 +4,7 @@ export const metadata: ComponentMetadata = {
   component_name: 'Contenido_2026_Quito',
   category: 'Contenido con listas',
   name: 'Bloque de datos de contacto con iconos teléfono/email/ubicación 2026',
-  description: 'Bloque vertical de datos de contacto con título h2 y listado de ítems; cada ítem combina un icono SVG (3 variantes fijas: teléfono, email o localización) y un texto HTML. El ÚLTIMO ítem del listado se resalta en azul. Genera structured data schema.org ContactPoint extrayendo automáticamente el primer ítem de cada tipo (phone/email/locator)',
+  description: 'Bloque vertical de datos de contacto con título h2 y listado de ítems; cada ítem combina un icono SVG (3 variantes fijas: teléfono, email o localización) y un texto HTML. El ÚLTIMO ítem del listado se resalta en rojo. Genera structured data schema.org ContactPoint extrayendo automáticamente el primer ítem de cada tipo (phone/email/locator)',
   framework: 'Astro',
   priority: 1,
   tags: ['contenido', 'contacto', 'icono', 'seo', 'listado'],
@@ -20,7 +20,7 @@ export const metadata: ComponentMetadata = {
     {
       name: 'items',
       type: 'list',
-      help: 'Listado de datos de contacto. Cada item tiene un icono (teléfono, email o localización) y un texto. El structured data SEO extrae el PRIMER item con icono "phone" como teléfono, el PRIMER con "email" como email, y el PRIMER con "locator" como localidad. Además, el ÚLTIMO item del listado se resalta en azul',
+      help: 'Listado de datos de contacto. Cada item tiene un icono (teléfono, email o localización) y un texto. El structured data SEO extrae el PRIMER item con icono "phone" como teléfono, el PRIMER con "email" como email, y el PRIMER con "locator" como localidad. Además, el ÚLTIMO item del listado se resalta en rojo',
       label: 'Listado de items de contacto',
       mandatory: false,
       items: {

package/src/carbins/Contenido_2026_Ubeda.ts

@@ -4,7 +4,7 @@ export const metadata: ComponentMetadata = {
   component_name: 'Contenido_2026_Ubeda',
   category: 'Contenido con listas',
   name: 'Bloque destacado de hasta 3 columnas con cifras grandes y separadores 2026',
-  description: 'Bloque con fondo azul translúcido que muestra hasta 3 ítems en fila en desktop (1/3 de ancho cada uno) y apilados en móvil, con separadores visuales entre ellos (laterales en desktop, horizontales en móvil). Cada ítem combina una cifra o título destacado (40px móvil / 56px desktop semibold) con una descripción centrada debajo (tamaño xl, admite HTML). Diseñado para exactamente 3 ítems',
+  description: 'Bloque con fondo beige translúcido que muestra hasta 3 ítems en fila en desktop (1/3 de ancho cada uno) y apilados en móvil, con separadores visuales entre ellos (laterales en desktop, horizontales en móvil). Cada ítem combina una cifra o título destacado (40px móvil / 56px desktop semibold) con una descripción centrada debajo (tamaño xl, admite HTML). Diseñado para exactamente 3 ítems',
   framework: 'Astro',
   priority: 1,
   tags: ['contenido', 'texto', 'destacado', 'grid', 'cifras'],

package/src/carbins/Enlace_2025_Venecia.ts

@@ -3,8 +3,8 @@ import type { ComponentMetadata } from '../interfaces/types';
 export const metadata: ComponentMetadata = {
   component_name: 'Enlace_2025_Venecia',
   category: 'Contenido de Texto',
-  name: 'Enlace azul con icono de flecha o play y target configurable 2025',
-  description: 'Enlace estilizado en color azul corporativo con dos variantes de icono: "Flecha" a la derecha del texto (estilo "saber más") o "Play" a la izquierda con subrayado permanente en el texto (estilo "ver vídeo"). Soporta target configurable (_self o _blank, con rel="noopener noreferrer" automático al abrir en nueva pestaña) y aria-label heredado del texto para accesibilidad',
+  name: 'Enlace rojo con icono de flecha o play y target configurable 2025',
+  description: 'Enlace estilizado en color rojo corporativo con dos variantes de icono: "Flecha" a la derecha del texto (estilo "saber más") o "Play" a la izquierda con subrayado permanente en el texto (estilo "ver vídeo"). Soporta target configurable (_self o _blank, con rel="noopener noreferrer" automático al abrir en nueva pestaña) y aria-label heredado del texto para accesibilidad',
   framework: 'Astro',
   priority: 1,
   tags: ['enlace', 'link', 'texto', 'icono'],

package/src/carbins/FAQ_2026_Takayama.ts

@@ -4,7 +4,7 @@ export const metadata: ComponentMetadata = {
   component_name: 'FAQ_2026_Takayama',
   category: 'Contenido con listas',
   name: 'Acordeón de tarjetas blancas con título IBM Plex Serif 24px, chevron y listas a 3 columnas con check 2026',
-  description: 'Acordeón según diseño de Figma (Apuntes y Consejos): etiqueta pequeña opcional sobre fondo azul muy claro y, debajo, una tarjeta blanca por ítem (esquinas 16px, sombra suave, padding 24px) con título IBM Plex Serif 24px semibold y chevron a la derecha que gira al abrir. Comportamiento exclusivo: al abrir una pregunta se cierran las demás; un segundo click la cierra. Estado inicial configurable. Las respuestas admiten HTML: los párrafos se muestran en IBM Plex Sans 16px y las listas <ul><li> se pintan a 3 columnas en escritorio (1 en móvil) con un icono de check a la izquierda de cada elemento. Incluye datos estructurados FAQPage.',
+  description: 'Acordeón según diseño de Figma (Apuntes y Consejos): etiqueta pequeña opcional sobre fondo beige muy claro y, debajo, una tarjeta blanca por ítem (esquinas 16px, sombra suave, padding 24px) con título IBM Plex Serif 24px semibold y chevron a la derecha que gira al abrir. Comportamiento exclusivo: al abrir una pregunta se cierran las demás; un segundo click la cierra. Estado inicial configurable. Las respuestas admiten HTML: los párrafos se muestran en IBM Plex Sans 16px y las listas <ul><li> se pintan a 3 columnas en escritorio (1 en móvil) con un icono de check a la izquierda de cada elemento. Incluye datos estructurados FAQPage.',
   framework: 'Astro',
   priority: 1,
   tags: ['texto', 'faq', 'acordeon', 'preguntas', 'interactivo', 'sumario', 'tarjeta'],
@@ -12,7 +12,7 @@ export const metadata: ComponentMetadata = {
     {
         name: 'title',
         type: 'text',
-        help: 'Etiqueta pequeña que aparece encima de las tarjetas (párrafo con estilo de tag: fondo azul muy claro, 14px). Si se deja vacío, no se muestra',
+        help: 'Etiqueta pequeña que aparece encima de las tarjetas (párrafo con estilo de tag: fondo beige muy claro, 14px). Si se deja vacío, no se muestra',
         label: 'Texto de la etiqueta superior',
         mandatory: false,
         example_value: 'Características del producto'

package/src/carbins/Hero_2026_Lliria.ts

@@ -4,7 +4,7 @@ export const metadata: ComponentMetadata = {
   component_name: 'Hero_2026_Lliria',
   category: 'Contenido de Imagen',
   name: 'Hero de portada con título, descripción, imagen de fondo y CTA móvil 2026',
-  description: 'Cabecera de portada a todo el ancho con imagen de fondo cover y 600px de alto mínimo, con el texto centrado verticalmente. En escritorio el texto (título h1 en IBM Plex Serif 56px regular y descripción en 32px, ambos en color oscuro #262626) ocupa la mitad izquierda, dejando visible la imagen en la mitad derecha. En móvil el texto ocupa todo el ancho (título 40px semibold, descripción 28px), la imagen muestra su zona izquierda (object-position: left) y aparece un botón CTA opcional (SOLO visible en móvil, según diseño)',
+  description: 'Cabecera de portada a todo el ancho con imagen de fondo cover y 600px de alto mínimo, con el texto centrado verticalmente. En escritorio el texto (título h1 en IBM Plex Serif 56px regular y descripción en 32px, ambos en color oscuro #1b1b1b) ocupa la mitad izquierda, dejando visible la imagen en la mitad derecha. En móvil el texto ocupa todo el ancho (título 40px semibold, descripción 28px), la imagen muestra su zona izquierda (object-position: left) y aparece un botón CTA opcional (SOLO visible en móvil, según diseño)',
   framework: 'Astro',
   priority: 1,
   tags: ['hero', 'banner', 'imagen', 'portada', 'cabecera', 'inicio'],

package/src/carbins/Imagen_2025_Bogota.ts

@@ -92,7 +92,7 @@ export const metadata: ComponentMetadata = {
     {
       name: 'color',
       type: 'text',
-      help: 'Color del texto del título y descripción en formato hexadecimal (p. ej. "#ffffff", "#262626"). ATENCIÓN: Tailwind JIT no genera clases desde valores dinámicos, por lo que este valor requiere estar en la safelist del tailwind.config para que se aplique correctamente. Por defecto "#ffffff" (blanco)',
+      help: 'Color del texto del título y descripción en formato hexadecimal (p. ej. "#ffffff", "#1b1b1b"). ATENCIÓN: Tailwind JIT no genera clases desde valores dinámicos, por lo que este valor requiere estar en la safelist del tailwind.config para que se aplique correctamente. Por defecto "#ffffff" (blanco)',
       label: 'Color del texto (hex)',
       mandatory: false,
       example_value: '#ffffff'

package/src/carbins/Mapa_2026_Girona.ts

@@ -64,17 +64,17 @@ export const metadata: ComponentMetadata = {
       type: 'select',
       help: 'Color de fondo de la sección. "Transparente" hereda el fondo de la página. Si eliges un color, la sección añade padding y bordes redondeados',
       label: 'Color de fondo',
-      options: ['transparent', '#F8F8F8', '#F2F2F2', '#DDE0EC', '#262626'],
-      options_labels: ['Transparente', 'Gris muy claro', 'Gris claro', 'Azul claro', 'Oscuro'],
+      options: ['transparent', '#fafaf5', '#ebe7da', '#e1c8b4', '#1b1b1b'],
+      options_labels: ['Transparente', 'Beige muy claro', 'Beige', 'Beige oscuro', 'Oscuro'],
       example_value: 'transparent'
     },
     {
       name: 'textColor',
       type: 'text',
-      help: 'Color del texto y los iconos en formato hex. Usa un tono oscuro (ej. #262626) sobre fondos claros y uno claro (ej. #f2f3f8) sobre fondos oscuros. El panel de contacto se adapta automáticamente',
+      help: 'Color del texto y los iconos en formato hex. Usa un tono oscuro (ej. #1b1b1b) sobre fondos claros y uno claro (ej. #ebe7da) sobre fondos oscuros. El panel de contacto se adapta automáticamente',
       label: 'Color del texto',
       mandatory: false,
-      example_value: '#262626'
+      example_value: '#1b1b1b'
     },
     {
       name: 'showContactInfo',

package/src/carbins/Modal_2025_Sagunto.ts

@@ -20,7 +20,7 @@ export const metadata: ComponentMetadata = {
     {
       name: 'frontColor',
       type: 'text',
-      help: 'Color del texto del botón. Acepta nombre CSS (ej. "white", "black") o código hex (ej. "#001978"). NO se invierte en hover (a diferencia de CTA_2025_Formentera)',
+      help: 'Color del texto del botón. Acepta nombre CSS (ej. "white", "black") o código hex (ej. "#d71635"). NO se invierte en hover (a diferencia de CTA_2025_Formentera)',
       label: 'Color del texto (frontal)',
       mandatory: false,
       example_value: '#ffffff'
@@ -31,7 +31,7 @@ export const metadata: ComponentMetadata = {
       help: 'Color de fondo del botón. Acepta nombre CSS o código hex',
       label: 'Color de fondo',
       mandatory: false,
-      example_value: '#001978'
+      example_value: '#d71635'
     },
     {
       name: 'borderColor',
@@ -39,7 +39,7 @@ export const metadata: ComponentMetadata = {
       help: 'Color del borde del botón (1px sólido). Acepta nombre CSS o código hex',
       label: 'Color del borde',
       mandatory: false,
-      example_value: '#001978'
+      example_value: '#d71635'
     },
     {
       name: 'imageModal',

package/src/carbins/Modal_2026_Almeria.ts

@@ -20,7 +20,7 @@ export const metadata: ComponentMetadata = {
     {
       name: 'frontColor',
       type: 'text',
-      help: 'Color del texto del botón propio. Acepta nombre CSS (ej. "white") o hex (ej. "#001978"). No se invierte en hover. Solo aplica si hay buttonText',
+      help: 'Color del texto del botón propio. Acepta nombre CSS (ej. "white") o hex (ej. "#d71635"). No se invierte en hover. Solo aplica si hay buttonText',
       label: 'Color del texto (frontal)',
       mandatory: false,
       example_value: '#ffffff'
@@ -31,7 +31,7 @@ export const metadata: ComponentMetadata = {
       help: 'Color de fondo del botón propio. Acepta nombre CSS o hex. Solo aplica si hay buttonText',
       label: 'Color de fondo',
       mandatory: false,
-      example_value: '#001978'
+      example_value: '#d71635'
     },
     {
       name: 'borderColor',
@@ -39,7 +39,7 @@ export const metadata: ComponentMetadata = {
       help: 'Color del borde del botón propio (1px sólido). Acepta nombre CSS o hex. Solo aplica si hay buttonText',
       label: 'Color del borde',
       mandatory: false,
-      example_value: '#001978'
+      example_value: '#d71635'
     },
     {
       name: 'triggerHash',

package/src/carbins/Separador_2025_Reinosa.ts

@@ -3,10 +3,10 @@ import type { ComponentMetadata } from '../interfaces/types';
 export const metadata: ComponentMetadata = {
   component_name: 'Separador_2025_Reinosa',
   category: 'Separador',
-  name: 'Separador de 16px en azul corporativo #001978 2025',
-  description: 'Barra horizontal fina (16px de alto) en azul corporativo plano #001978 aplicado a todo el ancho del contenedor. Componente sin parámetros configurables: se usa como divisor visual destacado entre secciones. Para separadores neutros más discretos usa Separador_2025_Toledo',
+  name: 'Separador de 16px en rojo corporativo #d71635 2025',
+  description: 'Barra horizontal fina (16px de alto) en rojo corporativo plano #d71635 aplicado a todo el ancho del contenedor. Componente sin parámetros configurables: se usa como divisor visual destacado entre secciones. Para separadores neutros más discretos usa Separador_2025_Toledo',
   framework: 'Astro',
   priority: 1,
-  tags: ['separador', 'azul-corporativo', 'divisor'],
+  tags: ['separador', 'rojo-corporativo', 'divisor'],
   fields: []
 };

package/src/carbins/Separador_2025_Toledo.ts

@@ -4,7 +4,7 @@ export const metadata: ComponentMetadata = {
   component_name: 'Separador_2025_Toledo',
   category: 'Separador',
   name: 'Separador horizontal neutro de 1px gris sin parámetros 2025',
-  description: 'Línea horizontal gris de 1px (border-top con color #B6B7BB) utilizada como divisor neutro y discreto entre secciones de contenido. Componente sin parámetros configurables. Para separadores más destacados con gradiente corporativo usa Separador_2025_Reinosa',
+  description: 'Línea horizontal gris de 1px (border-top con color #e1c8b4) utilizada como divisor neutro y discreto entre secciones de contenido. Componente sin parámetros configurables. Para separadores más destacados en rojo corporativo usa Separador_2025_Reinosa',
   framework: 'Astro',
   priority: 1,
   tags: ['separador', 'hr', 'linea', 'divisor'],

package/src/carbins/Separador_2026_Teulada.ts

@@ -4,7 +4,7 @@ export const metadata: ComponentMetadata = {
   component_name: 'Separador_2026_Teulada',
   category: 'Separador',
   name: 'Separador con imagen de fondo, título y botón 2026',
-  description: 'Franja separadora a todo el ancho con imagen de fondo (background cover centrado) y 64px de padding vertical. Sobre la imagen se muestra, centrado y en blanco, un título h2 opcional (IBM Plex Serif 20px semibold) y un botón opcional con borde blanco que al pasar el ratón se rellena de blanco con texto azul #001978. Para separadores sin imagen usa Separador_2025_Toledo o Separador_2025_Reinosa',
+  description: 'Franja separadora a todo el ancho con imagen de fondo (background cover centrado) y 64px de padding vertical. Sobre la imagen se muestra, centrado y en blanco, un título h2 opcional (IBM Plex Serif 20px semibold) y un botón opcional con borde blanco que al pasar el ratón se rellena de blanco con texto rojo #d71635. Para separadores sin imagen usa Separador_2025_Toledo o Separador_2025_Reinosa',
   framework: 'Astro',
   priority: 1,
   tags: ['separador', 'banner', 'imagen', 'cta', 'boton', 'franja'],

package/src/carbins/SpectrumSeparator.ts

@@ -3,7 +3,7 @@ import type { ComponentMetadata } from '../interfaces/types';
 export const metadata: ComponentMetadata = {
   component_name: 'SpectrumSeparator',
   category: 'Separador',
-  name: 'Separador spectrum en azul corporativo',
+  name: 'Separador spectrum en rojo corporativo',
   description: 'Spectrum separador',
   framework: 'Astro',
   priority: 1,

package/src/carbins/Tag_2025_Bolonia.ts

@@ -3,8 +3,8 @@ import type { ComponentMetadata } from '../interfaces/types';
 export const metadata: ComponentMetadata = {
   component_name: 'Tag_2025_Bolonia',
   category: 'Contenido de Texto',
-  name: 'Listado horizontal de pastillas de tag con fondo azul muy claro 2025',
-  description: 'Grupo de etiquetas/tags en fila, cada una renderizada como una pastilla redondeada con borde gris claro y fondo azul muy claro. Recibe directamente un array de strings planos (sin campos anidados por ítem). Se usa habitualmente dentro de Hero_2025/2026_Benidorm para etiquetar artículos de blog',
+  name: 'Listado horizontal de pastillas de tag con fondo beige muy claro 2025',
+  description: 'Grupo de etiquetas/tags en fila, cada una renderizada como una pastilla redondeada con borde gris claro y fondo beige muy claro. Recibe directamente un array de strings planos (sin campos anidados por ítem). Se usa habitualmente dentro de Hero_2025/2026_Benidorm para etiquetar artículos de blog',
   framework: 'Astro',
   priority: 1,
   tags: ['texto', 'tag', 'etiqueta', 'pastilla', 'badge'],
@@ -12,7 +12,7 @@ export const metadata: ComponentMetadata = {
     {
       name: 'tags',
       type: 'list',
-      help: 'Listado de etiquetas/tags. Cada una se renderiza como una pastilla redondeada con borde gris claro y fondo azul muy claro. Si se deja vacío, no aparece ningún tag',
+      help: 'Listado de etiquetas/tags. Cada una se renderiza como una pastilla redondeada con borde gris claro y fondo beige muy claro. Si se deja vacío, no aparece ningún tag',
       label: 'Listado de tags',
       mandatory: false,
       items: {

package/src/carbins/TextImageHeader.ts

@@ -5,7 +5,7 @@ import type { ComponentMetadata } from '../interfaces/types';
 export const metadata: ComponentMetadata = {
   component_name: 'TextImageHeader',
   category: 'Contenido de Imagen',
-  name: 'Contenido de texto con imagen y polígono con degradado',
+  name: 'Contenido de texto con imagen y polígono rojo',
   description: 'Cabecera con texto destacado, imagen y botón de acción personalizable. Ideal para resaltar información clave en páginas principales.',
   framework: 'Astro',
   tags: ['card','lefebvre.es'],

package/src/carbins/Texto_2025_Kyoto.ts

@@ -20,7 +20,7 @@ export const metadata: ComponentMetadata = {
     {
       name: 'tipo',
       type: 'select',
-      help: 'Controla etiqueta HTML Y tamaño del título (van ligados). Todos los tipos usan IBM Plex Serif semibold color #262626. "Sin título" NO muestra el título aunque "Texto del título" tenga valor. "H1" → <h1> a 40px / line-height 48px (36px / 44px en móvil). "H2 32px" → <h2> a 32px / line-height 40px (28px / 36px en móvil). "H2 32px Normal" → <h2> a 32px / line-height 40px (28px / 36px en móvil) con peso normal. "H2" → <h2> a 24px / line-height 32px. "H3 24px" → <h3> a 24px / line-height 32px (mismo tamaño visual que "H2" pero etiqueta HTML distinta). "H3" → <h3> a 20px / line-height 28px. "H4" → <h4> a 20px / line-height 28px (mismo tamaño visual que "H3" pero etiqueta HTML distinta)',
+      help: 'Controla etiqueta HTML Y tamaño del título (van ligados). Todos los tipos usan IBM Plex Serif semibold color #1b1b1b. "Sin título" NO muestra el título aunque "Texto del título" tenga valor. "H1" → <h1> a 40px / line-height 48px (36px / 44px en móvil). "H2 32px" → <h2> a 32px / line-height 40px (28px / 36px en móvil). "H2 32px Normal" → <h2> a 32px / line-height 40px (28px / 36px en móvil) con peso normal. "H2" → <h2> a 24px / line-height 32px. "H3 24px" → <h3> a 24px / line-height 32px (mismo tamaño visual que "H2" pero etiqueta HTML distinta). "H3" → <h3> a 20px / line-height 28px. "H4" → <h4> a 20px / line-height 28px (mismo tamaño visual que "H3" pero etiqueta HTML distinta)',
       label: 'Etiqueta del título',
       options: ['none', 'h1', 'h2-40', 'h2-32', 'h2-32-normal', 'h2', 'h3-24', 'h3', 'h4'],
       options_labels: ['Sin título', 'H1', 'H2 40px', 'H2 32px', 'H2 32px Normal', 'H2', 'H3 24px', 'H3', 'H4'],
@@ -46,10 +46,10 @@ export const metadata: ComponentMetadata = {
     {
       name: 'color',
       type: 'text',
-      help: 'Color de texto aplicado al título. Acepta cualquier valor CSS válido: hex (#262626), rgb(), nombre de color, etc. Por defecto #262626',
+      help: 'Color de texto aplicado al título. Acepta cualquier valor CSS válido: hex (#1b1b1b), rgb(), nombre de color, etc. Por defecto #1b1b1b',
       label: 'Color del texto',
       mandatory: false,
-      example_value: '#262626'
+      example_value: '#1b1b1b'
     }
   ]
 };