@synthex-engineers/refined-tech 1.0.1 → 1.0.3

package/dist/astro/components/HelpTooltip.astro

@@ -16,104 +16,224 @@ const {
   align = 'center',
   className = '',
 } = Astro.props;
-
-const alignClasses = {
-  left: 'left-0 translate-x-0',
-  center: 'left-1/2 -translate-x-1/2',
-  right: 'right-0 translate-x-0',
-}[align];
-
-const arrowAlignClasses = {
-  left: 'left-3',
-  center: 'left-1/2 -translate-x-1/2',
-  right: 'right-3',
-}[align];
 ---
 
-<span class={`relative inline-flex items-center group/bubble ml-1.5 align-middle group-hover/bubble:z-50 group-focus-within/bubble:z-50 ${className}`}>
+<span
+  class={`relative inline-flex items-center group/bubble ml-1.5 align-middle ${className}`}
+  data-align={align}
+>
   <button
     type="button"
-    class="info-bubble-trigger w-4 h-4 rounded-full bg-white/10 hover:bg-brand-pistachio/20 text-white/70 hover:text-brand-pistachio border border-white/20 hover:border-brand-pistachio/40 text-xs font-mono font-bold inline-flex items-center justify-center cursor-help transition-all duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-brand-pistachio"
+    class="info-bubble-trigger w-4 h-4 rounded-full bg-white/10 hover:bg-pistachio/20 text-white/70 hover:text-pistachio border border-white/20 hover:border-pistachio/40 text-xs font-mono font-bold inline-flex items-center justify-center cursor-help transition-all duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-pistachio shrink-0 select-none"
     aria-label={`${title}: ${description}`}
+    aria-expanded="false"
   >
     ?
   </button>
 
-  <!-- Popover Flotante Accesible (Hover & Focus) con fondo sólido opaco y contención -->
+  <!-- Popover Flotante Accesible (Hover, Focus & Click/Tap): sale justo arriba a 8px sin tapar el botón ? -->
   <span
     role="tooltip"
-    class={`info-bubble-tooltip absolute bottom-full ${alignClasses} mb-2.5 w-64 sm:w-72 p-3.5 rounded-xl bg-charcoal border border-white/20 text-left shadow-2xl z-[100] pointer-events-none opacity-0 translate-y-1 group-hover/bubble:opacity-100 group-hover/bubble:pointer-events-auto group-hover/bubble:translate-y-0 group-focus-within/bubble:opacity-100 group-focus-within/bubble:pointer-events-auto group-focus-within/bubble:translate-y-0 transition-all duration-200 backdrop-blur-xl`}
+    class="info-bubble-tooltip absolute bottom-[calc(100%+8px)] left-1/2 -translate-x-1/2 w-64 sm:w-72 max-w-[calc(100vw-32px)] p-3.5 rounded-xl border border-white/20 text-left shadow-2xl z-[100] pointer-events-none opacity-0 invisible transition-opacity duration-200"
   >
-    <span class="block text-xs font-display font-bold text-brand-pistachio mb-1" data-i18n={titleKey}>
+    <span class="block text-xs font-display font-bold text-pistachio mb-1" data-i18n={titleKey}>
       {title}
     </span>
     <span class="block text-xs font-body text-white/90 leading-relaxed" data-i18n={descKey}>
       {description}
     </span>
 
-    <!-- Flecha indicadora inferior -->
+    <!-- Flecha indicadora apuntando al botón ? -->
     <span
-      class={`info-bubble-arrow absolute top-full ${arrowAlignClasses} -mt-[1px] border-4 border-transparent border-t-charcoal`}
+      class="info-bubble-arrow absolute top-full left-1/2 -translate-x-1/2 -mt-[1px] border-[5px] border-transparent border-t-[#141414] pointer-events-none"
     ></span>
   </span>
 </span>
 
+<style is:global>
+  /* Visibilidad y z-index garantizados independientemente de Tailwind */
+  .group\/bubble:hover .info-bubble-tooltip,
+  .group\/bubble:focus-within .info-bubble-tooltip,
+  .group\/bubble[data-state="open"] .info-bubble-tooltip,
+  .group\/bubble.is-open .info-bubble-tooltip {
+    opacity: 1 !important;
+    pointer-events: auto !important;
+    visibility: visible !important;
+  }
+
+  .group\/bubble:hover,
+  .group\/bubble:focus-within,
+  .group\/bubble[data-state="open"],
+  .group\/bubble.is-open {
+    z-index: 60 !important;
+  }
+
+  .info-bubble-tooltip {
+    background-color: #141414 !important;
+  }
+
+  /* Inversión vertical automática si no cabe por arriba */
+  .info-bubble-tooltip.is-inverted {
+    bottom: auto !important;
+    top: calc(100% + 8px) !important;
+  }
+
+  .info-bubble-arrow {
+    border-top-color: #141414 !important;
+  }
+
+  .info-bubble-tooltip.is-inverted .info-bubble-arrow {
+    top: auto !important;
+    bottom: 100% !important;
+    margin-top: 0 !important;
+    margin-bottom: -1px !important;
+    border-top-color: transparent !important;
+    border-bottom-color: #141414 !important;
+  }
+</style>
+
 <script>
-  function initHelpTooltips() {
-    const triggers = document.querySelectorAll<HTMLElement>('.info-bubble-trigger');
-
-    triggers.forEach((trigger) => {
-      if ((trigger as any).__infoBubbleBound) return;
-      (trigger as any).__infoBubbleBound = true;
-
-      const tooltip = trigger.parentElement?.querySelector<HTMLElement>('.info-bubble-tooltip');
-      if (!tooltip) return;
-
-      function repositionTooltip() {
-        if (!tooltip) return;
-        tooltip.style.removeProperty('left');
-        tooltip.style.removeProperty('right');
-        tooltip.style.removeProperty('transform');
-
-        requestAnimationFrame(() => {
-          const rect = tooltip.getBoundingClientRect();
-          const viewportWidth = window.innerWidth;
-          const margin = 16;
-
-          // Corrección si se sale por la derecha
-          if (rect.right > viewportWidth - margin) {
-            const overflow = rect.right - viewportWidth + margin;
-            tooltip.style.transform = `translateX(-${overflow}px)`;
-          } else if (rect.left < margin) {
-            const overflow = margin - rect.left;
-            tooltip.style.transform = `translateX(${overflow}px)`;
-          }
-
-          // Inversión vertical si no cabe por arriba
-          const arrow = tooltip.querySelector<HTMLElement>('.info-bubble-arrow');
-          if (rect.top < 60) {
-            tooltip.classList.remove('bottom-full', 'mb-2.5');
-            tooltip.classList.add('top-full', 'mt-2.5');
-            if (arrow) {
-              arrow.classList.remove('top-full', '-mt-[1px]', 'border-t-charcoal');
-              arrow.classList.add('bottom-full', '-mb-[1px]', 'border-b-charcoal');
-            }
-          } else {
-            tooltip.classList.remove('top-full', 'mt-2.5');
-            tooltip.classList.add('bottom-full', 'mb-2.5');
-            if (arrow) {
-              arrow.classList.remove('bottom-full', '-mb-[1px]', 'border-b-charcoal');
-              arrow.classList.add('top-full', '-mt-[1px]', 'border-t-charcoal');
-            }
-          }
-        });
+  function setupHelpTooltipSystem() {
+    if ((window as any).__synthexHelpTooltipInitialized) return;
+    (window as any).__synthexHelpTooltipInitialized = true;
+
+    let activeBubble: HTMLElement | null = null;
+
+    function closeActiveBubble() {
+      if (activeBubble) {
+        activeBubble.removeAttribute('data-state');
+        activeBubble.classList.remove('is-open');
+        const trigger = activeBubble.querySelector<HTMLButtonElement>('.info-bubble-trigger');
+        if (trigger) trigger.setAttribute('aria-expanded', 'false');
+        activeBubble = null;
+      }
+    }
+
+    function reposition(bubble: HTMLElement) {
+      const trigger = bubble.querySelector<HTMLElement>('.info-bubble-trigger');
+      const tooltip = bubble.querySelector<HTMLElement>('.info-bubble-tooltip');
+      const arrow = bubble.querySelector<HTMLElement>('.info-bubble-arrow');
+      if (!trigger || !tooltip) return;
+
+      // 1. Reset base
+      tooltip.classList.remove('is-inverted');
+      tooltip.style.left = '50%';
+      tooltip.style.transform = 'translateX(-50%)';
+      if (arrow) {
+        arrow.style.left = '50%';
+        arrow.style.transform = 'translateX(-50%)';
       }
 
-      trigger.addEventListener('mouseenter', repositionTooltip);
-      trigger.addEventListener('focus', repositionTooltip);
+      // 2. Medir cotas en el viewport
+      const triggerRect = trigger.getBoundingClientRect();
+      const tooltipRect = tooltip.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      const margin = 16;
+
+      // 3. Comprobar si cabe verticalmente arriba (mínimo 60px libres desde el top)
+      if (triggerRect.top - tooltipRect.height - 12 < 60) {
+        tooltip.classList.add('is-inverted');
+      }
+
+      // 4. Cálculo horizontal para no salirse de los límites de la pantalla
+      const triggerCenterX = triggerRect.left + (triggerRect.width / 2);
+      const idealLeft = triggerCenterX - (tooltipRect.width / 2);
+      const idealRight = idealLeft + tooltipRect.width;
+
+      let shiftX = 0;
+      if (idealRight > viewportWidth - margin) {
+        shiftX = (viewportWidth - margin) - idealRight;
+      } else if (idealLeft < margin) {
+        shiftX = margin - idealLeft;
+      }
+
+      if (shiftX !== 0) {
+        tooltip.style.transform = `translateX(calc(-50% + ${shiftX}px))`;
+
+        // Mantener la flecha apuntando exactamente al centro del botón ?
+        if (arrow) {
+          const arrowLeft = (tooltipRect.width / 2) - shiftX;
+          const clampedArrowLeft = Math.max(14, Math.min(tooltipRect.width - 14, arrowLeft));
+          arrow.style.left = `${clampedArrowLeft}px`;
+          arrow.style.transform = 'translateX(-50%)';
+        }
+      }
+    }
+
+    // Delegación universal de Clic / Tap
+    document.addEventListener('click', (e) => {
+      const target = e.target as HTMLElement | null;
+      const trigger = target?.closest<HTMLButtonElement>('.info-bubble-trigger');
+
+      if (trigger) {
+        e.preventDefault();
+        e.stopPropagation();
+        const bubble = trigger.closest<HTMLElement>('.group\\/bubble');
+        if (!bubble) return;
+
+        const isOpen = bubble.getAttribute('data-state') === 'open' || bubble.classList.contains('is-open');
+        closeActiveBubble();
+
+        if (!isOpen) {
+          bubble.setAttribute('data-state', 'open');
+          bubble.classList.add('is-open');
+          trigger.setAttribute('aria-expanded', 'true');
+          activeBubble = bubble;
+          reposition(bubble);
+        }
+        return;
+      }
+
+      // Si se hace clic dentro del tooltip, mantenerlo abierto
+      if (target?.closest('.info-bubble-tooltip')) {
+        return;
+      }
+
+      // Clic fuera -> cerrar
+      closeActiveBubble();
     });
+
+    // Delegación universal de Hover (MouseEnter & MouseOver en fase de captura)
+    document.addEventListener('mouseover', (e) => {
+      const target = e.target as HTMLElement | null;
+      const trigger = target?.closest<HTMLButtonElement>('.info-bubble-trigger');
+      if (trigger) {
+        const bubble = trigger.closest<HTMLElement>('.group\\/bubble');
+        if (bubble) reposition(bubble);
+      }
+    }, true);
+
+    // Delegación universal de Foco Accesible
+    document.addEventListener('focusin', (e) => {
+      const target = e.target as HTMLElement | null;
+      const trigger = target?.closest<HTMLButtonElement>('.info-bubble-trigger');
+      if (trigger) {
+        const bubble = trigger.closest<HTMLElement>('.group\\/bubble');
+        if (bubble) reposition(bubble);
+      }
+    });
+
+    // Cierre accesible con tecla Escape
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') {
+        closeActiveBubble();
+      }
+    });
+
+    // Recalcular o cerrar en scroll/resize
+    window.addEventListener('resize', () => {
+      if (activeBubble) reposition(activeBubble);
+    }, { passive: true });
+
+    window.addEventListener('scroll', () => {
+      if (activeBubble) closeActiveBubble();
+    }, { passive: true });
   }
 
-  initHelpTooltips();
-  document.addEventListener('astro:page-load', initHelpTooltips);
+  setupHelpTooltipSystem();
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', setupHelpTooltipSystem);
+  }
+  document.addEventListener('astro:page-load', setupHelpTooltipSystem);
+  window.addEventListener('synthex:page-ready', setupHelpTooltipSystem);
 </script>

package/dist/astro/components/Preloader.astro

@@ -0,0 +1,240 @@
+---
+// Preloader Vectorial Cinemático: Metamorfosis Geométrica al Logotipo Horizontal Synthex
+---
+
+<div
+  id="preloader-curtain"
+  class="fixed inset-0 z-[9999] flex flex-col items-center justify-center bg-charcoal select-none overflow-hidden"
+  aria-hidden="true"
+>
+  <div class="relative flex flex-col items-center justify-center p-8">
+    <!-- Contenedor Maestro SVG con Formas Geométricas que mutan al Logo Horizontal -->
+    <svg
+      id="preloader-master-svg"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 350 100"
+      class="w-72 sm:w-80 md:w-[420px] overflow-visible"
+    >
+      <defs>
+        <!-- Trazados Destino Ocultos: Isotipo Oficial </> en Verde Pistacho -->
+        <!-- 0: Bracket Izquierdo < -->
+        <path
+          id="target-bracket-left"
+          d="M 40 29 L 18 50 L 40 71 L 44.5 66.5 L 27 50 L 44.5 33.5 Z"
+        />
+        <!-- 1: Barra Diagonal / -->
+        <path
+          id="target-slash"
+          d="M 50.5 70 L 64.5 30 L 68.5 31.5 L 54.5 71.5 Z"
+        />
+        <!-- 2: Bracket Derecho > -->
+        <path
+          id="target-bracket-right"
+          d="M 74 29 L 96 50 L 74 71 L 69.5 66.5 L 87 50 L 69.5 33.5 Z"
+        />
+
+        <!-- Trazados Destino Ocultos: Glifos Tipográficos Outfit Bold de 'Synthex' -->
+        <!-- 3: S -->
+        <path
+          id="target-char-s"
+          d="M135.12 68.59L135.12 68.59Q130.42 68.59 127.02 67.08Q123.62 65.57 120.86 62.38L120.86 62.38L126.37 56.93Q128.21 59.09 130.42 60.22Q132.64 61.36 135.66 61.36L135.66 61.36Q138.36 61.36 139.84 60.39Q141.33 59.41 141.33 57.69L141.33 57.69Q141.33 55.90 140.03 54.82Q138.74 53.74 136.71 53.02Q134.69 52.29 132.39 51.45Q130.10 50.61 128.05 49.34Q125.99 48.07 124.72 45.97Q123.46 43.86 123.46 40.51L123.46 40.51Q123.46 37.00 125.16 34.49Q126.86 31.98 129.88 30.63Q132.91 29.28 136.85 29.28L136.85 29.28Q140.84 29.28 144.16 30.71Q147.49 32.14 149.65 34.52L149.65 34.52L144.14 39.97Q142.41 38.19 140.66 37.33Q138.90 36.46 136.69 36.46L136.69 36.46Q134.42 36.46 133.15 37.30Q131.88 38.14 131.88 39.70L131.88 39.70Q131.88 41.38 133.15 42.35Q134.42 43.32 136.47 44.05Q138.52 44.78 140.82 45.62Q143.11 46.45 145.14 47.78Q147.16 49.10 148.46 51.29Q149.75 53.47 149.75 56.93L149.75 56.93Q149.75 62.44 145.87 65.52Q141.98 68.59 135.12 68.59Z"
+        />
+        <!-- 4: y -->
+        <path
+          id="target-char-y"
+          d="M164.23 79.07L155.75 79.07L161.69 66.22L151.70 41.76L160.61 41.76L165.85 57.74L171.19 41.76L180.10 41.76L168.87 68.11L164.23 79.07Z"
+        />
+        <!-- 5: n -->
+        <path
+          id="target-char-n"
+          d="M191.50 68L183.23 68L183.23 41.76L191.50 41.76L191.50 43.86Q194.41 41.22 198.84 41.22L198.84 41.22Q201.70 41.22 203.97 42.59Q206.24 43.97 207.53 46.24Q208.83 48.51 208.83 51.21L208.83 51.21L208.83 68L200.57 68L200.57 53.04Q200.57 50.99 199.30 49.72Q198.03 48.45 196.09 48.45L196.09 48.45Q194.09 48.45 192.79 49.72Q191.50 50.99 191.50 53.04L191.50 53.04L191.50 68Z"
+        />
+        <!-- 6: t -->
+        <path
+          id="target-char-t"
+          d="M226.11 68L217.85 68L217.85 48.78L211.91 48.78L211.91 41.76L217.85 41.76L217.85 30.90L226.11 30.90L226.11 41.76L232.05 41.76L232.05 48.78L226.11 48.78L226.11 68Z"
+        />
+        <!-- 7: h -->
+        <path
+          id="target-char-h"
+          d="M243.93 68L235.67 68L235.67 28.80L243.93 28.80L243.93 43.70Q246.74 41.22 251.00 41.22L251.00 41.22Q254.03 41.22 256.35 42.48Q258.67 43.75 259.97 46.02Q261.26 48.29 261.26 51.21L261.26 51.21L261.26 68L253.00 68L253.00 53.04Q253.00 50.99 251.73 49.72Q250.46 48.45 248.52 48.45L248.52 48.45Q246.52 48.45 245.23 49.72Q243.93 50.99 243.93 53.04L243.93 53.04L243.93 68Z"
+        />
+        <!-- 8: e -->
+        <path
+          id="target-char-e"
+          d="M279.52 68.59L279.52 68.59Q275.25 68.59 271.93 66.84Q268.61 65.08 266.72 61.98Q264.83 58.87 264.83 54.88L264.83 54.88Q264.83 50.94 266.69 47.86Q268.55 44.78 271.74 42.97Q274.93 41.16 278.92 41.16L278.92 41.16Q282.76 41.16 285.75 42.86Q288.75 44.56 290.45 47.51Q292.15 50.45 292.15 54.28L292.15 54.28Q292.15 55.74 291.77 57.58L291.77 57.58L272.98 57.63Q273.63 59.85 275.30 61.03Q276.98 62.22 279.46 62.22L279.46 62.22Q283.40 62.22 285.73 59.52L285.73 59.52L290.26 64.06Q288.32 66.33 285.56 67.46Q282.81 68.59 279.52 68.59ZM278.98 47.48L278.98 47.48Q276.71 47.48 275.14 48.67Q273.58 49.86 272.98 51.96L272.98 51.96L284.43 51.91Q283.40 47.48 278.98 47.48Z"
+        />
+        <!-- 9: x -->
+        <path
+          id="target-char-x"
+          d="M302.52 68L293.50 68L302.90 54.61L293.99 41.76L303.65 41.76L308.03 48.88L312.46 41.76L321.42 41.76L312.67 54.45L321.96 68L312.40 68L307.54 60.17L302.52 68Z"
+        />
+      </defs>
+
+      <!-- FORMAS GEOMÉTRICAS ELEMENTALES ACTIVAS (▲ ■ ●) QUE MUTAN AL LOGO -->
+      <g id="preloader-morph-group" class="opacity-0">
+        <!-- 0: Triángulo que muta al Bracket Izquierdo < (cx: 31, cy: 50) -->
+        <path
+          id="morph-shape-0"
+          class="morph-item"
+          d="M 18 50 L 44 32 L 44 68 Z"
+          fill="#E0F9B5"
+        />
+
+        <!-- 1: Rectángulo vertical que muta a la Barra / (cx: 58, cy: 50) -->
+        <path
+          id="morph-shape-1"
+          class="morph-item"
+          d="M 54 30 L 63 30 L 63 70 L 54 70 Z"
+          fill="#E0F9B5"
+        />
+
+        <!-- 2: Triángulo que muta al Bracket Derecho > (cx: 85, cy: 50) -->
+        <path
+          id="morph-shape-2"
+          class="morph-item"
+          d="M 96 50 L 70 68 L 70 32 Z"
+          fill="#E0F9B5"
+        />
+
+        <!-- 3: Círculo que muta a 'S' (cx: 135, cy: 50, r: 16) -->
+        <path
+          id="morph-shape-3"
+          class="morph-item"
+          d="M 135 34 A 16 16 0 1 0 135 66 A 16 16 0 1 0 135 34 Z"
+          fill="#FFFFFF"
+        />
+
+        <!-- 4: Triángulo invertido que muta a 'y' (cx: 166, cy: 55) -->
+        <path
+          id="morph-shape-4"
+          class="morph-item"
+          d="M 152 40 L 180 40 L 166 75 Z"
+          fill="#FFFFFF"
+        />
+
+        <!-- 5: Cuadrado que muta a 'n' (cx: 196, cy: 54, w: 26, h: 26) -->
+        <path
+          id="morph-shape-5"
+          class="morph-item"
+          d="M 183 41 L 209 41 L 209 67 L 183 67 Z"
+          fill="#FFFFFF"
+        />
+
+        <!-- 6: Rectángulo vertical que muta a 't' (cx: 222, cy: 50) -->
+        <path
+          id="morph-shape-6"
+          class="morph-item"
+          d="M 215 31 L 229 31 L 229 68 L 215 68 Z"
+          fill="#FFFFFF"
+        />
+
+        <!-- 7: Cuadrado alto que muta a 'h' (cx: 248, cy: 49) -->
+        <path
+          id="morph-shape-7"
+          class="morph-item"
+          d="M 235 29 L 261 29 L 261 68 L 235 68 Z"
+          fill="#FFFFFF"
+        />
+
+        <!-- 8: Círculo que muta a 'e' (cx: 278, cy: 55, r: 14) -->
+        <path
+          id="morph-shape-8"
+          class="morph-item"
+          d="M 278 41 A 14 14 0 1 0 278 69 A 14 14 0 1 0 278 41 Z"
+          fill="#FFFFFF"
+        />
+
+        <!-- 9: Rombo / Diamante que muta a 'x' (cx: 308, cy: 55, r: 14) -->
+        <path
+          id="morph-shape-9"
+          class="morph-item"
+          d="M 308 41 L 322 55 L 308 69 L 294 55 Z"
+          fill="#FFFFFF"
+        />
+      </g>
+    </svg>
+  </div>
+</div>
+
+<script>
+  import gsap from 'gsap';
+  import { MorphSVGPlugin } from 'gsap/MorphSVGPlugin';
+
+  gsap.registerPlugin(MorphSVGPlugin);
+
+  const curtain = document.getElementById('preloader-curtain');
+  const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  const alreadySeen = sessionStorage.getItem('synthex_preloaded_session');
+
+  function notifyPageReady() {
+    (window as any).__synthexPageReady = true;
+    window.dispatchEvent(new CustomEvent('synthex:page-ready'));
+  }
+
+  if (curtain) {
+    if (prefersReducedMotion || alreadySeen) {
+      curtain.style.display = 'none';
+      document.documentElement.classList.add('synthex-preloaded');
+      requestAnimationFrame(() => {
+        notifyPageReady();
+      });
+    } else {
+      const morphGroup = document.getElementById('preloader-morph-group');
+      const targets = [
+        '#target-bracket-left',
+        '#target-slash',
+        '#target-bracket-right',
+        '#target-char-s',
+        '#target-char-y',
+        '#target-char-n',
+        '#target-char-t',
+        '#target-char-h',
+        '#target-char-e',
+        '#target-char-x',
+      ];
+
+      const tl = gsap.timeline({
+        onComplete: () => {
+          // Desplegar suavemente el telón hacia arriba
+          gsap.to(curtain, {
+            yPercent: -100,
+            duration: 0.7,
+            ease: 'power4.inOut',
+            onStart: () => {
+              notifyPageReady();
+            },
+            onComplete: () => {
+              curtain.style.display = 'none';
+              sessionStorage.setItem('synthex_preloaded_session', 'true');
+              document.documentElement.classList.add('synthex-preloaded');
+            },
+          });
+        },
+      });
+
+      // 1. Entrada sutil de las figuras geométricas elementales (▲ ■ ●)
+      tl.to(morphGroup, {
+        opacity: 1,
+        duration: 0.35,
+        ease: 'power2.out',
+      });
+
+      // 2. Metamorfosis geométrica con MorphSVG (cada figura transmuta al glifo oficial)
+      targets.forEach((targetSelector, index) => {
+        tl.to(
+          `#morph-shape-${index}`,
+          {
+            morphSVG: targetSelector,
+            duration: 0.85,
+            ease: 'power2.inOut',
+          },
+          0.2 + index * 0.035
+        );
+      });
+
+      // 3. Breve pausa ceremonial tras completarse el logotipo
+      tl.to({}, { duration: 0.35 });
+    }
+  }
+</script>

package/dist/astro/components/WavyUnderlineHeading.astro

@@ -1,19 +1,23 @@
 ---
 interface Props {
+  as?: 'h1' | 'h2' | 'h3' | 'span';
   prefixText?: string;
   highlightText?: string;
   strokeColor?: string;
   className?: string;
+  headingClass?: string;
   prefixI18nKey?: string;
   highlightI18nKey?: string;
   id?: string;
 }
 
 const {
+  as: Tag = 'h2',
   prefixText = "Ingeniería con",
   highlightText = "total transparencia.",
   strokeColor = "#E0F9B5",
   className = "",
+  headingClass = "text-2xl sm:text-3xl md:text-4xl font-display font-bold text-white tracking-tight leading-snug",
   prefixI18nKey,
   highlightI18nKey,
   id = "wavy-heading-" + Math.random().toString(36).substring(2, 7),
@@ -21,15 +25,15 @@ const {
 ---
 
 <div class={`w-full text-center ${className}`}>
-  <h2 class="font-display font-bold text-white tracking-tight leading-snug">
+  <Tag class={headingClass}>
     {prefixText && (
-      <span data-i18n={prefixI18nKey}>{prefixText}</span>
+      <span class="inline relative z-10" data-i18n={prefixI18nKey}>{prefixText}</span>
     )}{" "}
-    <span class="relative inline-block text-pistachio">
+    <span class="services-hero-highlight inline-block relative text-pistachio">
       <span class="relative z-10" data-i18n={highlightI18nKey}>{highlightText}</span>
       <svg
         id={`${id}-svg`}
-        class="wavy-underline-svg absolute left-0 -bottom-2 w-full h-3 sm:h-4 overflow-visible pointer-events-none"
+        class="wavy-underline-svg absolute left-0 -bottom-2 sm:-bottom-3 w-full h-3 sm:h-4 overflow-visible pointer-events-none z-10"
         style="opacity: 0; visibility: hidden;"
         viewBox="0 0 300 16"
         preserveAspectRatio="none"
@@ -47,7 +51,7 @@ const {
         />
       </svg>
     </span>
-  </h2>
+  </Tag>
 </div>
 
 <script>
@@ -58,6 +62,9 @@ const {
     const svgs = document.querySelectorAll<SVGSVGElement>('.wavy-underline-svg');
 
     svgs.forEach((svg) => {
+      if ((svg as any).__wavyBound) return;
+      (svg as any).__wavyBound = true;
+
       const path = svg.querySelector<SVGPathElement>('.wavy-underline-path');
       if (!path) return;
 
@@ -87,4 +94,5 @@ const {
 
   initWavyHeadings();
   document.addEventListener('astro:page-load', initWavyHeadings);
+  window.addEventListener('synthex:page-ready', initWavyHeadings);
 </script>

package/dist/astro/index.d.ts

@@ -2,6 +2,8 @@ export const ButtonOutline: any;
 export const ButtonPrimary: any;
 export const ButtonSecondary: any;
 export const ClientTrustCard: any;
+export const FooterBounceCurve: any;
+export const Preloader: any;
 export const HelpTooltip: any;
 export const LanguageSelectorPill: any;
 export const ProcessStepCard: any;

package/dist/astro/index.js

@@ -2,6 +2,8 @@ export { default as ButtonOutline } from './components/ButtonOutline.astro';
 export { default as ButtonPrimary } from './components/ButtonPrimary.astro';
 export { default as ButtonSecondary } from './components/ButtonSecondary.astro';
 export { default as ClientTrustCard } from './components/ClientTrustCard.astro';
+export { default as FooterBounceCurve } from './components/FooterBounceCurve.astro';
+export { default as Preloader } from './components/Preloader.astro';
 export { default as HelpTooltip } from './components/HelpTooltip.astro';
 export { default as LanguageSelectorPill } from './components/LanguageSelectorPill.astro';
 export { default as ProcessStepCard } from './components/ProcessStepCard.astro';