libreria-astro-lefebvre 0.1.146 → 0.2.1

package/README.md

@@ -182,6 +182,7 @@ Mismos valores que `genial-astro` (rama `feature/PWEB-26914-rediseo-rojo`), en h
 - `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).
 

package/package.json

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

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 (#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 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/Formulario_2025_Seul.ts

@@ -9,6 +9,14 @@ export const metadata: ComponentMetadata = {
   priority: 1,
   tags: ['formulario', 'lf2', 'leads', 'imagen', 'contacto'],
    fields: [
+    {
+      name: 'categoria',
+      type: 'text',
+      help: 'Etiqueta opcional (span) encima del título, con bullet rojo, fondo gris suave y tipografía mono en mayúsculas. Solo se muestra si "Mostrar imagen" está desactivado y el campo tiene valor',
+      label: 'Categoría',
+      mandatory: false,
+      example_value: 'Contacto'
+    },
     {
       name: 'title',
       type: 'text',

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 #e1c8b4) 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/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

@@ -9,6 +9,14 @@ export const metadata: ComponentMetadata = {
   priority: 1,
   tags: ['texto', 'html', 'titulo', 'contenido'],
   fields: [
+    {
+      name: 'categoria',
+      type: 'text',
+      help: 'Etiqueta opcional (span) que se muestra encima del título, con bullet rojo, fondo gris suave y tipografía mono en mayúsculas. Solo se renderiza si tiene valor',
+      label: 'Categoría',
+      mandatory: false,
+      example_value: 'Garantías'
+    },
     {
       name: 'title',
       type: 'text',

package/src/components/Astro/Boton_2026_Elx.astro

@@ -55,7 +55,7 @@ const typeClass = {
 {hasModal && (
 <Fragment>
 <!--POPUP-->
-<div id={`elx-popup-modal-${randomId}`} class="fixed w-full h-full pt-12 top-0 left-0 z-9999 hidden bg-gray-100/60 backdrop-blur-sm flex items-center justify-center">
+<div id={`elx-popup-modal-${randomId}`} class="fixed w-full h-full pt-12 top-0 left-0 z-9999 hidden bg-[#ebe7da]/60 backdrop-blur-sm flex items-center justify-center">
     <div class="flex flex-col w-full md:w-4/5 max-w-[1000px] max-h-[calc(100vh-96px)] m-auto p-4 rounded-2xl bg-white shadow-lg border border-[#e1c8b4] overflow-y-auto modal-guia">
         <div class="w-full flex justify-end">
             <button id={`js-close-elx-popup-${randomId}`} class="js-close-popup w-auto transition-transform hover:scale-125 cursor-pointer">X</button>

package/src/components/Astro/Button.astro

@@ -3,4 +3,4 @@
 const { label } = Astro.props;
 
 ---
-<button class="btn bg-[#d71635] text-gray-200 p-2 rounded-lg font-bold m-4 cursor-pointer transition-colors duration-300 hover:bg-red-600">{label}</button>
+<button class="btn bg-[#d71635] text-[#f2eee1] p-2 rounded-lg font-bold m-4 cursor-pointer transition-colors duration-300 hover:bg-[#71131f]">{label}</button>

package/src/components/Astro/Cabecera_2025_Madrid.astro

@@ -81,7 +81,7 @@ const categories = [
 
 ---
 
-<header class="sticky top-0 w-full font-body bg-white z-50 flex flex-col justify-center align-center items-center p-0 overflow-hidden">
+<header class="sticky top-0 w-full font-body bg-[rgba(250,250,245,0.80)] backdrop-blur-lg z-50 flex flex-col justify-center align-center items-center p-0 overflow-hidden">
     <nav class="px-4 py-3 w-full">
         
         <div class="max-w-7xl flex items-center justify-between mx-auto">
@@ -90,11 +90,11 @@ const categories = [
             </a>
             <div class="flex items-center gap-4">
                 <div class="flex items-center gap-4">
-                    <a href={url} class="h-12 max-[375px] px-3 md:px-5 py-3 font-body font-semibold max-[375px]:text-sm text-base border-1 border-[#d71635] text-[#d71635] hover:text-[#ffffff] hover:border-[#d71635] hover:bg-[#d71635] transition-all duration-300 rounded-lg cursor-pointer shadow-sm">{label}</a>
+                    <a href={url} class="h-12 max-[375px] px-3 md:px-5 py-3 font-body font-semibold max-[375px]:text-sm text-base border-1 border-[#d71635] bg-[#d71635] text-[#ffffff] hover:border-[#71131f] hover:bg-[#71131f] transition-all duration-300 rounded-lg cursor-pointer shadow-sm">{label}</a>
                 </div>
-                <button onclick="document.getElementById('navbar-default').classList.toggle('hidden'); event.target.classList.toggle('bg-gray-50');" 
-                type="button" class="font-body inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 
-                focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" 
+                <button onclick="document.getElementById('navbar-default').classList.toggle('hidden'); event.target.classList.toggle('bg-[#fafaf5]');" 
+                type="button" class="font-body inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-[#6d5e52] rounded-lg md:hidden hover:bg-[#ebe7da] 
+                focus:outline-none focus:ring-2 focus:ring-[#e1c8b4] dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" 
                 aria-controls="navbar-default" aria-expanded="false">
                     <span class="sr-only pointer-events-none">Abrir menú</span>
                     <svg class="w-5 h-5 pointer-events-none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
@@ -106,12 +106,12 @@ const categories = [
             
         </div>
     </nav>
-    <nav class="w-full flex items-center border-y border-gray-300">
+    <nav class="w-full flex items-center border-y border-[#e1c8b4]">
         <ul class="max-w-7xl hidden md:flex items-center justify-start md:gap-2 lg:gap-8 mx-auto">
             {categories.map(category => {
                 const isActive = currentPath.includes(category.link);
                 return (
-                <li class={`relative group border-b-4 hover:border-b-4 hover:border-[#d71635] hover:bg-gray-100 ${isActive ? 'border-b-4 border-[#d71635] active' : 'border-transparent'}`}>
+                <li class={`relative group border-b-4 hover:border-b-4 hover:border-[#d71635] hover:bg-[#ebe7da] ${isActive ? 'border-b-4 border-[#d71635] active' : 'border-transparent'}`}>
                     <a href={category.link} class="flex items-center md:px-4 lg:px-8 py-6">
                         <span>
                             {category.name}
@@ -125,12 +125,12 @@ const categories = [
                         )}
                     </a>
                     {category.subcategories.length > 0 && (
-                        <ul class="absolute left-0 mt-1 bg-white border border-gray-300 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all z-10 min-w-[280px]"
+                        <ul class="absolute left-0 mt-1 bg-white border border-[#e1c8b4] opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all z-10 min-w-[280px]"
                            
                         >
                             {category.subcategories.map(sub => (
                                 <li class="hover:text-[#d71635] hover:font-semibold">
-                                    <a href={sub.link} class="block px-4 py-3 hover:bg-gray-100">{sub.name}</a>
+                                    <a href={sub.link} class="block px-4 py-3 hover:bg-[#ebe7da]">{sub.name}</a>
                                 </li>
                             ))}
                         </ul>
@@ -140,7 +140,7 @@ const categories = [
         </ul>
     </nav>
 
-    <nav class="hidden w-full bg-white border-gray-200" id="navbar-default">
+    <nav class="hidden w-full bg-white border-[#e1c8b4]" id="navbar-default">
         <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto">
             
             <div class="w-full md:flex md:w-auto">
@@ -162,12 +162,12 @@ const categories = [
                         )}
                     </a>
                     {category.subcategories.length > 0 && (
-                        <ul class="absolute left-0 mt-1 bg-white border border-gray-300 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all z-10 min-w-[280px]"
+                        <ul class="absolute left-0 mt-1 bg-white border border-[#e1c8b4] opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all z-10 min-w-[280px]"
                            
                         >
                             {category.subcategories.map(sub => (
                                 <li class="hover:text-[#d71635] hover:font-semibold">
-                                    <a href={sub.link} class="block px-4 py-3 hover:bg-gray-100">{sub.name}</a>
+                                    <a href={sub.link} class="block px-4 py-3 hover:bg-[#ebe7da]">{sub.name}</a>
                                 </li>
                             ))}
                         </ul>

package/src/components/Astro/Cabecera_2026_Bilbao.astro

@@ -6,7 +6,7 @@ const {
 } = Astro.props;
 ---
 
-<header class="sticky top-0 w-full bg-white z-50">
+<header class="sticky top-0 w-full bg-[rgba(250,250,245,0.80)] backdrop-blur-lg z-50">
     <nav class="px-4 py-3 w-full">
         <div class={`max-w-7xl mx-auto flex items-center ${logoAlign === 'center' ? 'justify-center' : 'justify-start'}`}>
             <a href={subdirectory + '/'}>

package/src/components/Astro/Cabecera_2026_Dakota.astro

@@ -12,7 +12,7 @@ const {
 } = Astro.props;
 ---
 
-<header class="w-full bg-white">
+<header class="w-full bg-[rgba(250,250,245,0.80)]">
     <nav class="px-4 py-3 w-full">
         <div class="max-w-7xl mx-auto grid grid-cols-3 items-center gap-4">
             <div class={`flex ${logoAlign === 'center' ? 'justify-center col-start-2' : 'justify-start col-start-1'}`}>

package/src/components/Astro/Cabecera_2026_Madrid.astro

@@ -88,7 +88,7 @@ const categories: MenuItem[] = (categoriesProp && categoriesProp.length > 0)
 
 ---
 
-<header class="sticky top-0 w-full font-body bg-white z-50 flex flex-col justify-center align-center items-center p-0">
+<header class="sticky top-0 w-full font-body bg-[rgba(250,250,245,0.80)] backdrop-blur-lg z-50 flex flex-col justify-center align-center items-center p-0">
     <nav class="px-4 py-3 w-full">
         
         <div class="max-w-7xl flex items-center justify-between mx-auto">
@@ -97,11 +97,11 @@ const categories: MenuItem[] = (categoriesProp && categoriesProp.length > 0)
             </a>
             <div class="flex items-center gap-4">
                 <div class="flex items-center gap-4">
-                    <a href={url} class="h-12 max-[375px] px-3 md:px-5 py-3 font-body font-semibold max-[375px]:text-sm text-base border-1 border-[#d71635] text-[#d71635] hover:text-[#ffffff] hover:border-[#d71635] hover:bg-[#d71635] transition-all duration-300 rounded-lg cursor-pointer shadow-sm">{label}</a>
+                    <a href={url} class="h-12 max-[375px] px-3 md:px-5 py-3 font-body font-semibold max-[375px]:text-sm text-base border-1 border-[#d71635] bg-[#d71635] text-[#ffffff] hover:border-[#71131f] hover:bg-[#71131f] transition-all duration-300 rounded-lg cursor-pointer shadow-sm">{label}</a>
                 </div>
-                <button onclick="document.getElementById('navbar-default').classList.toggle('hidden'); event.target.classList.toggle('bg-gray-50');" 
-                type="button" class="font-body inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 
-                focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" 
+                <button onclick="document.getElementById('navbar-default').classList.toggle('hidden'); event.target.classList.toggle('bg-[#fafaf5]');" 
+                type="button" class="font-body inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-[#6d5e52] rounded-lg md:hidden hover:bg-[#ebe7da] 
+                focus:outline-none focus:ring-2 focus:ring-[#e1c8b4] dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" 
                 aria-controls="navbar-default" aria-expanded="false">
                     <span class="sr-only pointer-events-none">Abrir menú</span>
                     <svg class="w-5 h-5 pointer-events-none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
@@ -113,7 +113,7 @@ const categories: MenuItem[] = (categoriesProp && categoriesProp.length > 0)
             
         </div>
     </nav>
-    <nav class="w-full flex items-center border-y border-gray-300">
+    <nav class="w-full flex items-center border-y border-[#e1c8b4]">
         <ul class="max-w-7xl hidden md:flex items-center justify-start md:gap-2 lg:gap-8 mx-auto">
             {categories.map((category, index) => {
                 const isActive = currentPath.includes(category.link) ||
@@ -121,7 +121,7 @@ const categories: MenuItem[] = (categoriesProp && categoriesProp.length > 0)
                 const hasSub = category.subcategories?.length > 0;
                 const submenuId = `${identifier}-d-${index}`;
                 return (
-                <li class={`relative flex items-center border-b-4 hover:border-b-4 hover:border-[#d71635] hover:bg-gray-100 ${isActive ? 'border-b-4 border-[#d71635] active' : 'border-transparent'}`}>
+                <li class={`relative flex items-center border-b-4 hover:border-b-4 hover:border-[#d71635] hover:bg-[#ebe7da] ${isActive ? 'border-b-4 border-[#d71635] active' : 'border-transparent'}`}>
                     <a href={category.link} target={category.target ?? '_self'} class={`flex items-center py-6 md:pl-4 lg:pl-8 ${hasSub ? '' : 'md:pr-4 lg:pr-8'}`}>
                         <span>
                             {category.name}
@@ -144,11 +144,11 @@ const categories: MenuItem[] = (categoriesProp && categoriesProp.length > 0)
                     {hasSub && (
                         <ul
                             id={submenuId}
-                            class={`${identifier}-submenu absolute left-0 top-full mt-1 bg-white border border-gray-300 hidden z-10 min-w-[230px]`}
+                            class={`${identifier}-submenu absolute left-0 top-full mt-1 bg-white border border-[#e1c8b4] hidden z-10 min-w-[230px]`}
                         >
                             {category.subcategories?.map(sub => (
                                 <li class="hover:text-[#d71635] hover:font-semibold">
-                                    <a href={sub.link} target={sub.target ?? '_self'} class="block px-4 py-3 hover:bg-gray-100">{sub.name}</a>
+                                    <a href={sub.link} target={sub.target ?? '_self'} class="block px-4 py-3 hover:bg-[#ebe7da]">{sub.name}</a>
                                 </li>
                             ))}
                         </ul>
@@ -158,7 +158,7 @@ const categories: MenuItem[] = (categoriesProp && categoriesProp.length > 0)
         </ul>
     </nav>
 
-    <nav class="hidden w-full bg-white border-gray-200" id="navbar-default">
+    <nav class="hidden w-full bg-white border-[#e1c8b4]" id="navbar-default">
         <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto">
 
             <div class="w-full md:flex md:w-auto">
@@ -192,11 +192,11 @@ const categories: MenuItem[] = (categoriesProp && categoriesProp.length > 0)
                     {hasSub && (
                         <ul
                             id={submenuId}
-                            class={`${identifier}-submenu absolute left-0 top-full bg-white border border-gray-300 hidden z-10 w-full md:w-auto min-w-[230px]`}
+                            class={`${identifier}-submenu absolute left-0 top-full bg-white border border-[#e1c8b4] hidden z-10 w-full md:w-auto min-w-[230px]`}
                         >
                             {category.subcategories?.map(sub => (
                                 <li class="hover:text-[#d71635] hover:font-semibold">
-                                    <a href={sub.link} target={sub.target ?? '_self'} class="block px-4 py-3 hover:bg-gray-100">{sub.name}</a>
+                                    <a href={sub.link} target={sub.target ?? '_self'} class="block px-4 py-3 hover:bg-[#ebe7da]">{sub.name}</a>
                                 </li>
                             ))}
                         </ul>

package/src/components/Astro/Cabecera_2027_Guadalajara.astro

@@ -91,7 +91,7 @@ const categories: MenuItem[] = (categoriesProp && categoriesProp.length > 0)
 
 ---
 
-<header class="sticky top-0 w-full font-body bg-white z-50 flex flex-col justify-center align-center items-center p-0">
+<header class="sticky top-0 w-full font-body bg-[rgba(250,250,245,0.80)] backdrop-blur-lg z-50 flex flex-col justify-center align-center items-center p-0">
     <nav class="px-4 py-3 w-full">
         
         <div class="max-w-7xl flex items-center justify-between mx-auto">
@@ -101,12 +101,12 @@ const categories: MenuItem[] = (categoriesProp && categoriesProp.length > 0)
             <div class="flex items-center gap-4">
                 {label && (
                 <div class="flex items-center gap-4">
-                    <a href={url} class="h-12 max-[375px] px-3 md:px-5 py-3 font-body font-semibold max-[375px]:text-sm max-[375px]:leading-[21px] text-base leading-6 border-1 border-[#d71635] text-[#d71635] hover:text-[#ffffff] hover:border-[#d71635] hover:bg-[#d71635] transition-all duration-300 rounded-lg cursor-pointer shadow-sm">{label}</a>
+                    <a href={url} class="h-12 max-[375px] px-3 md:px-5 py-3 font-body font-semibold max-[375px]:text-sm max-[375px]:leading-[21px] text-base leading-6 border-1 border-[#d71635] bg-[#d71635] text-[#ffffff] hover:border-[#71131f] hover:bg-[#71131f] transition-all duration-300 rounded-lg cursor-pointer shadow-sm">{label}</a>
                 </div>
                 )}
-                <button onclick="document.getElementById('navbar-default').classList.toggle('hidden'); event.target.classList.toggle('bg-gray-50');"
-                type="button" class="font-body inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100
-                focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+                <button onclick="document.getElementById('navbar-default').classList.toggle('hidden'); event.target.classList.toggle('bg-[#fafaf5]');"
+                type="button" class="font-body inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-[#6d5e52] rounded-lg md:hidden hover:bg-[#ebe7da]
+                focus:outline-none focus:ring-2 focus:ring-[#e1c8b4] dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
                 aria-controls="navbar-default" aria-expanded="false">
                     <span class="sr-only pointer-events-none">Abrir menú</span>
                     <svg class="w-5 h-5 pointer-events-none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
@@ -118,7 +118,7 @@ const categories: MenuItem[] = (categoriesProp && categoriesProp.length > 0)
             
         </div>
     </nav>
-    <nav class="w-full flex items-center border-y border-gray-300">
+    <nav class="w-full flex items-center border-y border-[#e1c8b4]">
         <ul class="max-w-7xl hidden md:flex items-center justify-start md:gap-2 lg:gap-8 mx-auto">
             {categories.map((category, index) => {
                 const isActive = currentPath.includes(category.link) ||
@@ -126,7 +126,7 @@ const categories: MenuItem[] = (categoriesProp && categoriesProp.length > 0)
                 const hasSub = category.subcategories?.length > 0;
                 const submenuId = `${identifier}-d-${index}`;
                 return (
-                <li class={`relative flex items-center border-b-4 hover:border-b-4 hover:border-[#d71635] hover:bg-gray-100 ${isActive ? 'border-b-4 border-[#d71635] active' : 'border-transparent'}`}>
+                <li class={`relative flex items-center border-b-4 hover:border-b-4 hover:border-[#d71635] hover:bg-[#ebe7da] ${isActive ? 'border-b-4 border-[#d71635] active' : 'border-transparent'}`}>
                     <a href={category.link} target={category.target ?? '_self'} class={`flex items-center py-6 md:pl-4 lg:pl-8 ${hasSub ? '' : 'md:pr-4 lg:pr-8'}`}>
                         <span>
                             {category.name}
@@ -149,11 +149,11 @@ const categories: MenuItem[] = (categoriesProp && categoriesProp.length > 0)
                     {hasSub && (
                         <ul
                             id={submenuId}
-                            class={`${identifier}-submenu absolute left-0 top-full mt-1 bg-white border border-gray-300 hidden z-10 min-w-[230px]`}
+                            class={`${identifier}-submenu absolute left-0 top-full mt-1 bg-white border border-[#e1c8b4] hidden z-10 min-w-[230px]`}
                         >
                             {category.subcategories?.map(sub => (
                                 <li class="hover:text-[#d71635] hover:font-semibold">
-                                    <a href={sub.link} target={sub.target ?? '_self'} class="block px-4 py-3 hover:bg-gray-100">{sub.name}</a>
+                                    <a href={sub.link} target={sub.target ?? '_self'} class="block px-4 py-3 hover:bg-[#ebe7da]">{sub.name}</a>
                                 </li>
                             ))}
                         </ul>
@@ -163,7 +163,7 @@ const categories: MenuItem[] = (categoriesProp && categoriesProp.length > 0)
         </ul>
     </nav>
 
-    <nav class="hidden w-full bg-white border-gray-200" id="navbar-default">
+    <nav class="hidden w-full bg-white border-[#e1c8b4]" id="navbar-default">
         <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto">
 
             <div class="w-full md:flex md:w-auto">
@@ -197,11 +197,11 @@ const categories: MenuItem[] = (categoriesProp && categoriesProp.length > 0)
                     {hasSub && (
                         <ul
                             id={submenuId}
-                            class={`${identifier}-submenu absolute left-0 top-full bg-white border border-gray-300 hidden z-10 w-full md:w-auto min-w-[230px]`}
+                            class={`${identifier}-submenu absolute left-0 top-full bg-white border border-[#e1c8b4] hidden z-10 w-full md:w-auto min-w-[230px]`}
                         >
                             {category.subcategories?.map(sub => (
                                 <li class="hover:text-[#d71635] hover:font-semibold">
-                                    <a href={sub.link} target={sub.target ?? '_self'} class="block px-4 py-3 hover:bg-gray-100">{sub.name}</a>
+                                    <a href={sub.link} target={sub.target ?? '_self'} class="block px-4 py-3 hover:bg-[#ebe7da]">{sub.name}</a>
                                 </li>
                             ))}
                         </ul>

package/src/components/Astro/Calculadora_2026_Lisboa.astro

@@ -20,7 +20,7 @@ const randomId = Math.floor(Math.random() * 1000);
 <section class="w-full flex justify-center [background:conic-gradient(from_180deg_at_50%_44.39%,rgba(107,58,8,0.01)_0.07096946937963367deg,rgba(255,255,255,0.17)_177.9798674583435deg),var(--Background-Base,#FFF)]" id={`comp-Calc-${randomId}`}>
     <article class="w-full max-w-7xl flex flex-col py-6 px-4">
         {tag && (
-            <span class="text-[#403830] text-center font-body text-base not-italic font-normal leading-6 flex items-center justify-center gap-2.5 w-fit py-2 px-3 rounded bg-[#d71635]/10 mb-8">{tag}</span>
+            <span class="text-[#403830] text-center font-body text-base not-italic font-normal leading-6 flex items-center justify-center gap-2.5 w-fit py-2 px-3 rounded bg-[rgba(107,58,8,0.10)] mb-8">{tag}</span>
         )}
 
         <div class="flex flex-col md:flex-row items-center gap-6">

package/src/components/Astro/Card_2025_Malta.astro

@@ -37,7 +37,7 @@ const structuredData = `<script type="application/ld+json">
 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 w-full px-8 md:px-0 md:pb-12">
     {items.map((item) => (
         <div class="w-full flex flex-col px-0">
-            <article class="relative w-full h-full flex flex-col rounded-lg border border-gray-200 items-center shadow-article hover:bg-[#d71635] transition-all duration-300 p-[1px]">
+            <article class="relative w-full h-full flex flex-col rounded-lg border border-[#e1c8b4] items-center shadow-article hover:bg-[#d71635] transition-all duration-300 p-[1px]">
                 <div class="bg-white mt-[1px] rounded-tl-[7px] rounded-tr-[7px] w-full h-full">
                     <div class="p-6 flex-grow flex flex-col">
                         <div class="mt-2 flex items-center gap-2 flex-grow">
@@ -47,7 +47,7 @@ const structuredData = `<script type="application/ld+json">
                         </div>
                     </div>
                 </div>
-                <div class="bg-red-100 h-3"></div>
+                <div class="bg-[#fff0eb] h-3"></div>
             </article>
         </div>
     ))}

package/src/components/Astro/Contenido_2025_Malaga.astro

@@ -237,7 +237,7 @@ const videoUrl = iframeSrc || '';
     
 
 <!--POPUP-->
-<div id={`teruel-popup-modal-${randomId}`} class="fixed w-full h-full pt-12 top-0 left-0 z-9999 hidden bg-gray-100/60 backdrop-blur-sm flex items-center justify-center">
+<div id={`teruel-popup-modal-${randomId}`} class="fixed w-full h-full pt-12 top-0 left-0 z-9999 hidden bg-[#ebe7da]/60 backdrop-blur-sm flex items-center justify-center">
     <div class="flex flex-col w-full md:w-4/5 max-w-[1000px] max-h-[calc(100vh-96px)] m-auto p-4 rounded-2xl bg-white shadow-lg border border-[#e1c8b4] overflow-y-auto modal-guia">
         <div class="w-full flex justify-end">
             <button id={`js-close-teruel-popup-${randomId}`} class="js-close-popup w-auto transition-transform hover:scale-125 cursor-pointer">X</button>

package/src/components/Astro/Contenido_2025_Montevideo.astro

@@ -16,7 +16,7 @@ const imageUrl = extractImageUrl(image);
 ---
 
 <div class="w-full flex flex-col px-0">
-    <article class="relative w-full md:max-w-[400px] h-full flex flex-col rounded-lg border border-gray-200 items-center shadow-article hover:bg-[#d71635] transition-all duration-300 p-px">
+    <article class="relative w-full md:max-w-[400px] h-full flex flex-col rounded-lg border border-[#e1c8b4] items-center shadow-article hover:bg-[#d71635] transition-all duration-300 p-px">
         <div class="w-full bg-white mt-px rounded-tl-[7px] rounded-tr-[7px] h-full">
             <div class="w-full">
                 <img class="cursor-pointer rounded-tr-lg rounded-tl-lg mx-auto w-full" src={imageUrl} alt={altImage} width="400" height="225" loading="lazy" />
@@ -34,7 +34,7 @@ const imageUrl = extractImageUrl(image);
                 </div>
             </div>
         </div>
-        <div class="bg-red-100 h-3"></div>
+        <div class="bg-[#fff0eb] h-3"></div>
     </article>
 </div>
 

package/src/components/Astro/Contenido_2026_Cabra.astro

@@ -65,7 +65,7 @@ const structuredData = `<script type="application/ld+json">
 <section class="w-full flex items-center justify-center">
     <article class="w-full flex flex-col items-center justify-center">
         <div class="w-full flex justify-center items-center relative text-[56px] text-center font-body leading-[64px] mt-10">
-            <!-- <div class="flex bg-transparent md:bg-gray-50 md:border md:border-[#e1c8b4] rounded-lg"> -->
+            <!-- <div class="flex bg-transparent md:bg-[#fafaf5] md:border md:border-[#e1c8b4] rounded-lg"> -->
                 <div class="flex gap-1 md:gap-8 items-center">
                     {tabs.map((tab: Tab, index: number) => (
                         <p class="font-body text-base">
@@ -75,8 +75,8 @@ const structuredData = `<script type="application/ld+json">
                                 cursor-pointer border border-[#e1c8b4]
                                 hover:border hover:border-[#6d5e52] hover:!bg-[#ffffff] rounded-lg ${identifier}button
                                 ${index === 0 ? 'active' : ''}
-                                bg-F2F3F8 text-gray-100 max-w-10 max-h-5 text-[0px] md:w-[150px]
-                                md:bg-gray-50 md:text-black md:max-w-none md:max-h-none md:text-[16px]
+                                bg-ebe7da text-gray-100 max-w-10 max-h-5 text-[0px] md:w-[150px]
+                                md:bg-[#fafaf5] md:text-black md:max-w-none md:max-h-none md:text-[16px]
                                 `}
                             >{tab.name}</button>
                         </p>
@@ -121,7 +121,7 @@ const structuredData = `<script type="application/ld+json">
 
 
 <style>
-    .bg-F2F3F8 {
+    .bg-ebe7da {
         background-color: #ebe7da;
     }
     .active{

package/src/components/Astro/Contenido_2026_Estepona.astro

@@ -71,7 +71,7 @@ const structuredData = `<script type="application/ld+json">
     <article class="w-full flex flex-col items-center justify-center">
         {showTabBar && (
             <div class="w-full flex justify-center items-center relative text-[56px] text-center font inter leading-[64px] mt-10">
-                <!-- <div class="flex bg-transparent md:bg-gray-50 md:border md:border-[#e1c8b4] rounded-lg"> -->
+                <!-- <div class="flex bg-transparent md:bg-[#fafaf5] md:border md:border-[#e1c8b4] rounded-lg"> -->
                     <div class="flex gap-1 md:gap-8 items-center">
                         {tabs.map((tab: Tab, index: number) => (
                             <p class="font-body text-base">
@@ -81,8 +81,8 @@ const structuredData = `<script type="application/ld+json">
                                     cursor-pointer border border-[#e1c8b4]
                                     hover:border hover:border-[#6d5e52] hover:!bg-[#ffffff] rounded-lg ${identifier}button
                                     ${index === 0 ? 'active' : ''}
-                                    bg-F2F3F8 text-gray-100 max-w-10 max-h-5 text-[0px] md:w-[150px]
-                                    md:bg-gray-50 md:text-black md:max-w-none md:max-h-none md:text-[16px]
+                                    bg-ebe7da text-gray-100 max-w-10 max-h-5 text-[0px] md:w-[150px]
+                                    md:bg-[#fafaf5] md:text-black md:max-w-none md:max-h-none md:text-[16px]
                                     `}
                                 >{tab.name || `Pestaña ${index + 1}`}</button>
                             </p>
@@ -123,7 +123,7 @@ const structuredData = `<script type="application/ld+json">
 
 
 <style>
-    .bg-F2F3F8 {
+    .bg-ebe7da {
         background-color: #ebe7da;
     }
     .active{

package/src/components/Astro/Contenido_2026_Huesca.astro

@@ -24,7 +24,7 @@ const randomId = Math.floor(Math.random() * 1000);
 <section class="w-full max-w-7xl flex justify-center [background:conic-gradient(from_180deg_at_50%_44.39%,rgba(107,58,8,0.01)_0.07096946937963367deg,rgba(255,255,255,0.17)_177.9798674583435deg),var(--Background-Base,#FFF)]" id={`comp-ContHuesca-${randomId}`}>
     <article class="w-full justify-center max-w-7xl flex flex-col py-6 px-4">
         {tag && (
-            <span class="text-[#403830] text-center font-body text-base not-italic font-normal leading-6 flex items-center justify-center gap-2.5 w-fit py-2 px-3 rounded bg-[#d71635]/10 mb-8">{tag}</span>
+            <span class="text-[#403830] text-center font-body text-base not-italic font-normal leading-6 flex items-center justify-center gap-2.5 w-fit py-2 px-3 rounded bg-[rgba(107,58,8,0.10)] mb-8">{tag}</span>
         )}
 
         <div class="flex flex-col md:flex-row items-center gap-6">

package/src/components/Astro/Contenido_2026_Orcasitas.astro

@@ -137,7 +137,7 @@ const structuredData = items.length > 0 ? `<script type="application/ld+json">
     </div>
 
 <div id={"popup-iframe-modal-" + randomId } class="fixed w-full h-full top-0 left-0 z-9999 hidden">
-    <div class="flex flex-col justify-center items-center w-full h-full bg-gray-100/90 p-4">
+    <div class="flex flex-col justify-center items-center w-full h-full bg-[#ebe7da]/90 p-4">
         <div class="w-full flex justify-end">
             <button class="js-close-popup w-auto m-4 p-2 bg-white rounded transition-transform hover:scale-125 cursor-pointer">X</button>
         </div>

package/src/components/Astro/Contenido_2026_Oslo.astro

@@ -48,7 +48,7 @@ const structuredDataScript = `<script type="application/ld+json">${structuredDat
 </div>
 
 <div id={"popup-iframe-modal-" + randomId } class="fixed w-full h-full top-0 left-0 z-9999 hidden">
-    <div class="flex flex-col justify-center items-center w-full h-full bg-gray-100/90 p-4">
+    <div class="flex flex-col justify-center items-center w-full h-full bg-[#ebe7da]/90 p-4">
         <div class="w-full flex justify-end">
             <button class="js-close-popup w-auto m-4 p-2 bg-white rounded transition-transform hover:scale-125 cursor-pointer">X</button>
         </div>

package/src/components/Astro/Contenido_2026_Sevilla.astro

@@ -170,7 +170,7 @@ const imageUrl = imageBase || extractImageUrl(image);
     )}
 </section>
     
-<div id={`teruel-popup-modal-${randomId}`} class="fixed w-full h-full pt-12 top-0 left-0 z-9999 hidden bg-gray-100/60 backdrop-blur-sm flex items-center justify-center">
+<div id={`teruel-popup-modal-${randomId}`} class="fixed w-full h-full pt-12 top-0 left-0 z-9999 hidden bg-[#ebe7da]/60 backdrop-blur-sm flex items-center justify-center">
     <div class="flex flex-col w-full md:w-4/5 max-w-[1000px] max-h-[calc(100vh-96px)] m-auto p-4 rounded-2xl bg-white shadow-lg border border-[#e1c8b4] overflow-y-auto modal-guia">
         <div class="w-full flex justify-end">
             <button id={`js-close-teruel-popup-${randomId}`} class="js-close-popup w-auto transition-transform hover:scale-125 cursor-pointer">X</button>

package/src/components/Astro/Contenido_2026_Ubeda.astro

@@ -29,7 +29,7 @@ const { pageId = PAGE_ENTITY_ID, itemListId = '' } = Astro.props;
     }
     </script>`;
 ---
-<section class="w-full flex items-center justify-center bg-[#d71635]/4 py-12">
+<section class="w-full flex items-center justify-center bg-[rgba(107,58,8,0.04)] py-12">
     <article class="flex flex-col items-center justify-center p-4">
         <div class="flex flex-col md:flex-row items-center gap-4">
             {items.map(item => (

package/src/components/Astro/Contenido_2026_Yakarta.astro

@@ -71,7 +71,7 @@ const structuredData = items.length > 0 ? `<script type="application/ld+json">
                             hover:bg-white rounded-lg ${idAccordion}button
                             ${item.default ? 'active' : ''}
                             text-gray-100 max-w-10 max-h-5 text-[0px]
-                            md:bg-gray-50 md:text-black md:max-w-none md:max-h-none md:text-[16px]
+                            md:bg-[#fafaf5] md:text-black md:max-w-none md:max-h-none md:text-[16px]
                             [&.active]:bg-white [&.active]:border-[#6d5e52] [&.active]:text-black
                             [&.active]:max-w-none [&.active]:max-h-none [&.active]:text-[16px]
                             `}