libreria-astro-lefebvre 0.0.27 → 0.0.29

package/src/components/Astro/Repetidor_2025_Yakarta.astro

@@ -1,180 +1,204 @@
----
-
-const {
-    items = [],
-    iframeSrc
-} = Astro.props;
-
-const idAccordion = 'js-acordeon-' + Math.random().toString(36).substring(2, 15);
-
-const structuredData = `<script type="application/ld+json">
-{
-    "@context": "https://schema.org",
-    "@type": "WebPageElement",
-    "name": "Interactive Content Carousel",
-    "description": "A rotating carousel component displaying multiple content items with videos",
-    "mainEntity": {
-        "@type": "ItemList",
-        "numberOfItems": ${items.length},
-        "itemListElement": [
-            ${items.map((item, index) => `{
-                "@type": "ListItem",
-                "position": ${index + 1},
-                "item": {
-                    "@type": "VideoObject",
-                    "thumbnailUrl": "${item.thumbnailUrl || ''}",
-                    "duration": "${item.duration || 'PT0M'}",
-                    "name": "${item.title || ''}",
-                    "description": "${item.description ? item.description.replace(/<[^>]*>/g, '').replace(/"/g, '\\"') : ''}",
-                    "contentUrl": "${item.iframeSrc || ''}",
-                    "embedUrl": "${item.iframeSrc || ''}",
-                    "uploadDate": "${new Date().toISOString()}",
-                    "duration": "PT0M",
-                    "interactionStatistic": {
-                        "@type": "InteractionCounter",
-                        "interactionType": "https://schema.org/WatchAction",
-                        "userInteractionCount": 0
-                    }
-                }
-            }`).join(',\n      ')}
-        ]
-    },
-    "interactionStatistic": {
-        "@type": "InteractionCounter",
-        "interactionType": "https://schema.org/ViewAction",
-        "userInteractionCount": 0
-    }
-}
-</script>`;
----
-
-
-<section class="w-full flex items-center justify-center py-2 md:py-[80px]">
-    <article class="w-full flex flex-col items-center justify-center">
-        <div class="w-2/5 flex justify-center items-center relative text-[56px] text-center font-poppins font-normal leading-[64px] mb-0 md:mb-[48px]">
-            <!-- <div class="flex bg-[#001978]/4 border border-[#B6B7BB] rounded-lg"> -->
-            <div class="flex gap-1 md:gap-8 items-center">
-                {items.map((item, index) => (
-                    <p class="text-base">
-                        {/* <a href={`#accordion${index + 1}`} class="btn py-[20px] px-[16px]">{item}</a> */}
-                        <button data-linkedto={`${idAccordion}${index + 1}`} 
-                        class={`
-                            btn py-[12px] px-[20px] leading-[24px] font-inter
-                            cursor-pointer border border-transparent bg-F2F3F8
-                            hover:border hover:border-[#5F6168] 
-                            hover:bg-white rounded-lg ${idAccordion}button 
-                            ${item.default ? 'active' : ''}
-                            text-gray-100 max-w-[40px] max-h-[20px] text-[0px]
-                            md:bg-gray-50 md:text-black md:max-w-none md:max-h-none md:text-[16px]
-                            `}
-                        >{item.name}</button>
-                    </p>
-                ))}
-            </div> 
-        </div>
-        <div class="w-full px-6 md:w-3/5 md:px-[0] col my-[40px]">
-            {items.map((item, index) => (
-                <div id={`${idAccordion}${index + 1}`} class={`${item.default ? '' : 'hidden'} collapse-arrow ${idAccordion}item`}>
-                    <div class="collapse-title" id={`accordion${index + 1}`}>
-                        <div class="w-full flex flex-col lg:flex-row flex-1 gap-[48px]">
-                            <div class="w-full flex flex-col justify-start">
-                                <h3 class="text-[28px] md:text-[32px] leading-[36px] mb-[8px] text-[#363942] font-semibold not-italic font-poppins">{item.title}</h3>
-                                <p class="text-[#363942] font-poppins font-normal text-[20px] not-italic leading-[28px]" set:html={item.description}></p>
-                            </div>
-                            <div class="w-full lg:w-2/2 flex items-start">
-                                {/* <img src="/assets/images/genial/gradient-bg.webp" alt="Imagen" class="w-full h-auto rounded-xl" /> */}
-                                <video autoplay loop muted playsinline class="w-full h-auto rounded-xl">
-                                    <source src={item.iframeSrc} type="video/mp4" />
-                                </video> 
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            ))}
-        </div>
-    </article>
-</section>
-
-<style>
-    .bg-F2F3F8 {
-        background-color: #F2F3F8;
-    }
-    .active{
-        background-color: #ffffff;
-        border: 1px solid #5F6168;
-        color: black;
-        max-width: none;
-        max-height: none;
-        font-size: 16px;
-
-        &:hover{
-            background-color: #ffffff;
-            border: 1px solid #5F6168;
-        }
-    }
-</style>
-
-<script is:inline define:vars={{ idAccordion }}>
-
-
-let rotationInterval = null;
-let currentIndex = 0;
-let seconds = 4;
-
-const buttons = document.querySelectorAll(`.${idAccordion}button`);
-
-function startRotation() {
-    if (rotationInterval) return; // Already running
-    
-    rotationInterval = setInterval(() => {
-        if (buttons.length > 0) {
-            // Always move to next index first
-            currentIndex = (currentIndex + 1) % buttons.length;
-            // Then click the button at the new index
-            buttons[currentIndex].click();
-        }
-    }, seconds * 3000);
-}
-
-function stopRotation() {
-    if (rotationInterval) {
-        clearInterval(rotationInterval);
-        rotationInterval = null;
-    }
-}
-
-// Start automatic rotation
-startRotation();
-
-
-document.querySelectorAll(`.${idAccordion}button`).forEach(btn => {
-    btn.addEventListener('mouseenter', stopRotation);
-
-    btn.addEventListener('click', (e) => {
-        const linkedId = btn.getAttribute('data-linkedto');
-        const targetItem = document.getElementById(linkedId);
-        if (targetItem) {
-
-            const collapseCount = document.querySelectorAll(`.${idAccordion}item.collapse`).length;
-            const hiddenCount = document.querySelectorAll(`.${idAccordion}item.hidden`).length;
-            const desiredClass = collapseCount > hiddenCount ? 'collapse' : 'hidden';
-            
-            document.querySelectorAll(`.${idAccordion}item`).forEach(item => {
-                if (item === targetItem) return;
-                if (item.classList.contains(desiredClass)) return;                
-                item.classList.add(desiredClass);
-            });
-            targetItem.classList.toggle(desiredClass);
-            
-
-            document.querySelectorAll(`.${idAccordion}button`).forEach(item => {
-                if (item === btn) return;
-                item.classList.remove('active');
-            });
-            btn.classList.toggle('active');  
-        }       
-    });
-});
-</script>
-
+---
+
+const {
+    items = [],
+    iframeSrc
+} = Astro.props;
+
+const idAccordion = 'js-acordeon-' + Math.random().toString(36).substring(2, 15);
+
+const structuredData = `<script type="application/ld+json">
+{
+    "@context": "https://schema.org",
+    "@type": "WebPageElement",
+    "name": "Interactive Content Carousel",
+    "description": "A rotating carousel component displaying multiple content items with videos",
+    "mainEntity": {
+        "@type": "ItemList",
+        "numberOfItems": ${items.length},
+        "itemListElement": [
+            ${items.map((item, index) => `{
+                "@type": "ListItem",
+                "position": ${index + 1},
+                "item": {
+                    "@type": "VideoObject",
+                    "thumbnailUrl": "${item.thumbnailUrl || ''}",
+                    "duration": "${item.duration || 'PT0M'}",
+                    "name": "${item.title || ''}",
+                    "description": "${item.description ? item.description.replace(/<[^>]*>/g, '').replace(/"/g, '\\"') : ''}",
+                    "contentUrl": "${item.iframeSrc || ''}",
+                    "embedUrl": "${item.iframeSrc || ''}",
+                    "uploadDate": "${new Date().toISOString()}",
+                    "duration": "PT0M",
+                    "interactionStatistic": {
+                        "@type": "InteractionCounter",
+                        "interactionType": "https://schema.org/WatchAction",
+                        "userInteractionCount": 0
+                    }
+                }
+            }`).join(',\n      ')}
+        ]
+    },
+    "interactionStatistic": {
+        "@type": "InteractionCounter",
+        "interactionType": "https://schema.org/ViewAction",
+        "userInteractionCount": 0
+    }
+}
+</script>`;
+---
+
+
+<section class="w-full flex items-center justify-center py-2 md:py-[80px]">
+    <article class="w-full flex flex-col items-center justify-center">
+        <div class="w-2/5 flex justify-center items-center relative text-[56px] text-center font-poppins font-normal leading-[64px] mb-0 md:mb-[48px]">
+            <!-- <div class="flex bg-[#001978]/4 border border-[#B6B7BB] rounded-lg"> -->
+            <div class="flex gap-1 md:gap-8 items-center">
+                {items.map((item, index) => (
+                    <p class="text-base">
+                        {/* <a href={`#accordion${index + 1}`} class="btn py-[20px] px-[16px]">{item}</a> */}
+                        <button data-linkedto={`${idAccordion}${index + 1}`} 
+                        class={`
+                            btn py-[12px] px-[20px] leading-[24px] font-inter
+                            cursor-pointer border border-transparent bg-F2F3F8
+                            hover:border hover:border-[#5F6168] 
+                            hover:bg-white rounded-lg ${idAccordion}button 
+                            ${item.default ? 'active' : ''}
+                            text-gray-100 max-w-[40px] max-h-[20px] text-[0px]
+                            md:bg-gray-50 md:text-black md:max-w-none md:max-h-none md:text-[16px]
+                            `}
+                        >{item.name}</button>
+                    </p>
+                ))}
+            </div> 
+        </div>
+        <div class="w-full px-6 md:w-3/5 md:px-[0] col my-[40px]">
+            {items.map((item, index) => (
+                <div id={`${idAccordion}${index + 1}`} class={`${item.default ? '' : 'hidden'} collapse-arrow ${idAccordion}item`}>
+                    <div class="collapse-title" id={`accordion${index + 1}`}>
+                        <div class="w-full flex flex-col lg:flex-row flex-1 gap-[48px]">
+                            <div class="w-full flex flex-col justify-start">
+                                <h3 class="text-[28px] md:text-[32px] leading-[36px] mb-[8px] text-[#363942] font-semibold not-italic font-poppins">{item.title}</h3>
+                                <p class="text-[#363942] font-poppins font-normal text-[20px] not-italic leading-[28px]" set:html={item.description}></p>
+                            </div>
+                            <div class="w-full lg:w-2/2 flex items-start">
+                                {/* <img src="/assets/images/genial/gradient-bg.webp" alt="Imagen" class="w-full h-auto rounded-xl" /> */}
+                                <video autoplay loop muted playsinline class="w-full h-auto rounded-xl">
+                                    <source src={item.iframeSrc} type="video/mp4" />
+                                </video> 
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            ))}
+        </div>
+    </article>
+</section>
+
+<style>
+    .bg-F2F3F8 {
+        background-color: #F2F3F8;
+    }
+    .active{
+        background-color: #ffffff;
+        border: 1px solid #5F6168;
+        color: black;
+        max-width: none;
+        max-height: none;
+        font-size: 16px;
+
+        &:hover{
+            background-color: #ffffff;
+            border: 1px solid #5F6168;
+        }
+    }
+</style>
+
+<script is:inline define:vars={{ idAccordion }}>
+
+
+let rotationInterval = null;
+let currentIndex = 0;
+let seconds = 4;
+
+const buttons = document.querySelectorAll(`.${idAccordion}button`);
+
+function startRotation() {
+    if (rotationInterval) return; // Already running
+    
+    rotationInterval = setInterval(() => {
+        if (buttons.length > 0) {
+            // Always move to next index first
+            currentIndex = (currentIndex + 1) % buttons.length;
+            // Nota David: Comentamos el click y liamos el chocho de debajo porque manda eventos en GTM            
+            // buttons[currentIndex].click();
+            // Reemplaza lo de arriba
+            const btn = buttons[currentIndex];
+            const linkedId = btn.getAttribute('data-linkedto');
+            const targetItem = document.getElementById(linkedId);
+
+            if (targetItem) {
+                const collapseCount = document.querySelectorAll(`.${idAccordion}item.collapse`).length;
+                const hiddenCount = document.querySelectorAll(`.${idAccordion}item.hidden`).length;
+                const desiredClass = collapseCount > hiddenCount ? 'collapse' : 'hidden';
+                
+                document.querySelectorAll(`.${idAccordion}item`).forEach(item => {
+                    if (item === targetItem) return;
+                    if (item.classList.contains(desiredClass)) return;                
+                    item.classList.add(desiredClass);
+                });
+                targetItem.classList.toggle(desiredClass);
+                
+                document.querySelectorAll(`.${idAccordion}button`).forEach(item => {
+                    if (item === btn) return;
+                    item.classList.remove('active');
+                });
+                btn.classList.toggle('active');
+            }
+
+        }
+    }, seconds * 3000);
+}
+
+function stopRotation() {
+    if (rotationInterval) {
+        clearInterval(rotationInterval);
+        rotationInterval = null;
+    }
+}
+
+// Start automatic rotation
+startRotation();
+
+
+document.querySelectorAll(`.${idAccordion}button`).forEach(btn => {
+    btn.addEventListener('mouseenter', stopRotation);
+
+    btn.addEventListener('click', (e) => {
+        const linkedId = btn.getAttribute('data-linkedto');
+        const targetItem = document.getElementById(linkedId);
+        if (targetItem) {
+
+            const collapseCount = document.querySelectorAll(`.${idAccordion}item.collapse`).length;
+            const hiddenCount = document.querySelectorAll(`.${idAccordion}item.hidden`).length;
+            const desiredClass = collapseCount > hiddenCount ? 'collapse' : 'hidden';
+            
+            document.querySelectorAll(`.${idAccordion}item`).forEach(item => {
+                if (item === targetItem) return;
+                if (item.classList.contains(desiredClass)) return;                
+                item.classList.add(desiredClass);
+            });
+            targetItem.classList.toggle(desiredClass);
+            
+
+            document.querySelectorAll(`.${idAccordion}button`).forEach(item => {
+                if (item === btn) return;
+                item.classList.remove('active');
+            });
+            btn.classList.toggle('active');  
+        }       
+    });
+});
+</script>
+
 <Fragment set:html={structuredData} />

package/src/components/Astro/SEO_Head_Section.astro

@@ -1,32 +1,32 @@
----
-const {
-    title,
-    description,
-    robots = 'index, follow',
-    canonical = Astro.url.href.endsWith('/') ? Astro.url.href : Astro.url.href + '/',
-    shareImgSrc,
-    subdirectory = '',
-    } = Astro.props;
-
-const currentUrl = Astro.url.href.replace(/^(https?:\/\/[^\/]+)/, `$1${subdirectory}`);
-const normalizedUrl = currentUrl.endsWith('/') ? currentUrl : currentUrl + '/';
-    
----
-    <title>{title}</title>
-    <meta name="description" content={description} />
-    <meta name="robots" content={robots} />
-    <link rel="canonical" href={canonical.replace(/^(https?:\/\/[^\/]+)/, `$1${subdirectory}`)} />
-    
-    <!-- Open Graph / Facebook -->
-    <meta property="og:type" content="website" />
-    <meta property="og:url" content={normalizedUrl} />
-    <meta property="og:title" content={title} />
-    <meta property="og:description" content={description} />
-    {shareImgSrc && <meta property="og:image" content={shareImgSrc} />}
-    
-    <!-- Twitter -->
-    <meta property="twitter:card" content="summary_large_image" />
-    <meta property="twitter:url" content={normalizedUrl} />
-    <meta property="twitter:title" content={title} />
-    <meta property="twitter:description" content={description} />
-    {shareImgSrc && <meta property="twitter:image" content={shareImgSrc} />}
+---
+const {
+    title,
+    description,
+    robots = 'index, follow',
+    canonical = Astro.url.href.endsWith('/') ? Astro.url.href : Astro.url.href + '/',
+    shareImgSrc,
+    subdirectory = '',
+    } = Astro.props;
+
+const currentUrl = Astro.url.href.replace(/^(https?:\/\/[^\/]+)/, `$1${subdirectory}`);
+const normalizedUrl = currentUrl.endsWith('/') ? currentUrl : currentUrl + '/';
+    
+---
+    <title>{title}</title>
+    <meta name="description" content={description} />
+    <meta name="robots" content={robots} />
+    <link rel="canonical" href={canonical.replace(/^(https?:\/\/[^\/]+)/, `$1${subdirectory}`)} />
+    
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content={normalizedUrl} />
+    <meta property="og:title" content={title} />
+    <meta property="og:description" content={description} />
+    {shareImgSrc && <meta property="og:image" content={shareImgSrc} />}
+    
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:url" content={normalizedUrl} />
+    <meta property="twitter:title" content={title} />
+    <meta property="twitter:description" content={description} />
+    {shareImgSrc && <meta property="twitter:image" content={shareImgSrc} />}

package/src/components/Astro/Separador_2025_Reinosa.astro

@@ -1,4 +1,4 @@
----
-const {} = Astro.props;
----
+---
+const {} = Astro.props;
+---
 <div class="w-full h-4 bg-gradient-to-r from-indigo-900 via-blue-600 to-pink-500"></div>

package/src/components/Astro/Titulo_2025_Algeciras.astro

@@ -1,58 +1,58 @@
----
-
-const { 
-    title, 
-    h1Subtitle,
-    description = "", 
-    tipo = "",
-    descriptionWidth = "1/3", // 1/3 3/5 full
-    flexJustify = "justify-center"
-} = Astro.props;
-
-const structuredData = `<script type="application/ld+json">
-{
-    "@context": "https://schema.org",
-    "@type": "WebPageElement",
-    "name": "${title}",
-    "description": "${description}",
-    "headline": "${title}",
-    "mainEntityOfPage": {
-        "@type": "WebPage"
-    },
-    "author": {
-        "@type": "Organization",
-        "name": "Lefebvre"
-    }
-}
-</script>`;
-
----
-
-<div class={`w-full md:w-3/5 max-w-auto md:w-full flex ${flexJustify === 'justify-center' ? 'justify-center' : 'justify-start'} flex-col px-4`}>
-    {h1Subtitle && h1Subtitle.trim() !== "" && (
-        tipo === "h1" ? <h2 class="font-poppins text-[#262626] text-[36px] md:text-[56px] font-normal text-center leading-[44px] md:leading-[64px] px-6 md:mb-[48px]" set:html={h1Subtitle}></h2>
-        : tipo === "h1-home" ? <h2 class="font-poppins text-[#262626] text-[36px] md:text-[56px] font-normal text-center leading-[44px] md:leading-[64px] mb-[0px] mt-[32px] md:mt-[80px]" set:html={h1Subtitle}></h2>
-        : tipo === "h1-40" ? <h2 class="font-poppins text-[#262626] text-[40px] font-normal text-center leading-[48px] mb-[0] md:mb-[32px]" set:html={h1Subtitle}></h2>
-        : null
-    )}
-    {
-        h1Subtitle && h1Subtitle.trim() !== "" 
-        ? <h1 class="font-poppins text-[#262626] text-[20px] md:text-[24px] font-normal text-center leading-[24px] my-[32px] md:mb-[32px]" set:html={title}></h1>
-        : tipo === "h1" ? <h1 class="font-poppins text-[#262626] text-[36px] md:text-[56px] font-normal text-center leading-[44px] md:leading-[64px] px-6 md:my-[48px]" set:html={title}></h1>
-        : tipo === "h1-home" ? <h1 class="font-poppins text-[#262626] text-[36px] md:text-[56px] font-normal text-center leading-[44px] md:leading-[64px] mb-[0] md:mb-[64px] mt-[32px] md:mt-[80px]" set:html={title}></h1>
-        : tipo === "h1-40" ? <h1 class="font-poppins text-[#262626] text-[40px] font-normal text-center leading-[48px] mb-[0] md:mb-[32px]" set:html={title}></h1>
-        : tipo === "h2" ? <h2 class="font-poppins text-[#262626] text-[36px] md:text-[40px] font-normal text-center leading-[48px] my-[32px] md:mb-[32px]" set:html={title}></h2>
-        : tipo === "h2-mb64" ? <h2 class="font-poppins text-[#262626] text-[36px] md:text-[40px] font-normal text-center leading-[44px] md:leading-[48px] p-6 md:p-2 md:pb-6 mb-[0]" set:html={title}></h2>
-        : tipo === "h3" ? <h3 class="font-poppins text-[#262626] text-[24px] font-semibold text-center leading-[32px] mb-[8px]" set:html={title}></h3>
-        : tipo === "h3-mb32" ? <h3 class="font-poppins text-[#262626] text-[32px] font-normal text-left leading-[40px] mb-[32px]" set:html={title}></h3>
-        : tipo === "h4" ? <h4 class="font-poppins text-[#262626] text-center" set:html={title}></h4>
-        : tipo === "h5" ? <h5 class="font-poppins text-[#262626] text-center" set:html={title}></h5>
-        : tipo === "h6" ? <h6 class="font-poppins text-[#262626] text-center" set:html={title}></h6>
-        : <p>{title}</p>
-    }
-    {description && description.trim() !== "" && (
-        <div class={`w-full md:w-${descriptionWidth} text-[#363942] mx-auto font-inter text-base font-normal leading-[28px] mb-8 text-center`} set:html={description}></div>
-    )}
-</div>
-
+---
+
+const { 
+    title, 
+    h1Subtitle,
+    description = "", 
+    tipo = "",
+    descriptionWidth = "1/3", // 1/3 3/5 full
+    flexJustify = "justify-center"
+} = Astro.props;
+
+const structuredData = `<script type="application/ld+json">
+{
+    "@context": "https://schema.org",
+    "@type": "WebPageElement",
+    "name": "${title}",
+    "description": "${description}",
+    "headline": "${title}",
+    "mainEntityOfPage": {
+        "@type": "WebPage"
+    },
+    "author": {
+        "@type": "Organization",
+        "name": "Lefebvre"
+    }
+}
+</script>`;
+
+---
+
+<div class={`w-full md:w-3/5 max-w-auto md:w-full flex ${flexJustify === 'justify-center' ? 'justify-center' : 'justify-start'} flex-col`}>
+    {h1Subtitle && h1Subtitle.trim() !== "" && (
+        tipo === "h1" ? <h2 class="font-poppins text-[#262626] text-[36px] md:text-[56px] font-normal text-center leading-[44px] md:leading-[64px] px-6 md:mb-[48px]" set:html={h1Subtitle}></h2>
+        : tipo === "h1-home" ? <h2 class="font-poppins text-[#262626] text-[36px] md:text-[56px] font-normal text-center leading-[44px] md:leading-[64px] mb-[0px] mt-[32px] md:mt-[80px]" set:html={h1Subtitle}></h2>
+        : tipo === "h1-40" ? <h2 class="font-poppins text-[#262626] text-[40px] font-normal text-center leading-[48px] mb-[0] md:mb-[32px]" set:html={h1Subtitle}></h2>
+        : null
+    )}
+    {
+        h1Subtitle && h1Subtitle.trim() !== "" 
+        ? <h1 class="font-poppins text-[#262626] text-[20px] md:text-[24px] font-normal text-center leading-[24px] my-[32px] md:mb-[32px]" set:html={title}></h1>
+        : tipo === "h1" ? <h1 class="font-poppins text-[#262626] text-[36px] md:text-[56px] font-normal text-center leading-[44px] md:leading-[64px] px-6 md:my-[48px]" set:html={title}></h1>
+        : tipo === "h1-home" ? <h1 class="font-poppins text-[#262626] text-[36px] md:text-[56px] font-normal text-center leading-[44px] md:leading-[64px] mb-[0] md:mb-[64px] mt-[32px] md:mt-[80px]" set:html={title}></h1>
+        : tipo === "h1-40" ? <h1 class="font-poppins text-[#262626] text-[40px] font-normal text-center leading-[48px] mb-[0] md:mb-[32px]" set:html={title}></h1>
+        : tipo === "h2" ? <h2 class="font-poppins text-[#262626] text-[36px] md:text-[40px] font-normal text-center leading-[48px] my-[32px] md:mb-[32px]" set:html={title}></h2>
+        : tipo === "h2-mb64" ? <h2 class="font-poppins text-[#262626] text-[36px] md:text-[40px] font-normal text-center leading-[44px] md:leading-[48px] p-6 md:p-2 md:pb-6 mb-[0]" set:html={title}></h2>
+        : tipo === "h3" ? <h3 class="font-poppins text-[#262626] text-[24px] font-semibold text-center leading-[32px] mb-[8px]" set:html={title}></h3>
+        : tipo === "h3-mb32" ? <h3 class="font-poppins text-[#262626] text-[32px] font-normal text-left leading-[40px] mb-[32px]" set:html={title}></h3>
+        : tipo === "h4" ? <h4 class="font-poppins text-[#262626] text-center" set:html={title}></h4>
+        : tipo === "h5" ? <h5 class="font-poppins text-[#262626] text-center" set:html={title}></h5>
+        : tipo === "h6" ? <h6 class="font-poppins text-[#262626] text-center" set:html={title}></h6>
+        : <p>{title}</p>
+    }
+    {description && description.trim() !== "" && (
+        <div class={`w-full md:w-${descriptionWidth} text-[#363942] mx-auto font-inter text-base font-normal leading-[28px] mb-8 text-center`} set:html={description}></div>
+    )}
+</div>
+
 <Fragment set:html={structuredData} />

package/src/components/Astro/Titulo_2025_Santorini.astro

@@ -1,9 +1,9 @@
----
-
-const { 
-    description = "", 
-} = Astro.props;
-
----
-
+---
+
+const { 
+    description = "", 
+} = Astro.props;
+
+---
+
 <p class="font-poppins text-[#001978] text-[14px] font-semibold text-left leading-[20px] tracking-[2px] uppercase mb-[4px]">{description}</p>