feat: hero carousel v4 — full-width staggered horizontal slides

- Carousel spans full viewport width (not constrained to max-w-4xl)
- Transition staggered: outgoing exits left (power3.in 1.3s), incoming waits 0.65s then enters from right (power3.out 1.3s)
- Pause reduced: 6s → 3.5s with autoplay starting immediately (no heroTimeline delay)
- Stats: 'Senior' → 'Pro', 'Equipo senior' → 'Equipo de profesionales' (ES), 'Senior team' → 'Professional team' (EN)

src/components/Hero.astro

@@ -95,28 +95,178 @@ const { t, whatsappUrl } = Astro.props;
     </svg>
   </div>
 
-  <!-- Content -->
+  <!-- Content wrapper -->
-  <div class="relative z-10 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-32 md:py-40">
+  <div class="relative z-10 w-full py-32 md:py-40">
+
+    <!-- Eyebrow -->
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
       <div class="max-w-4xl">
         <div id="hero-eyebrow" class="eyebrow mb-7 opacity-0">
           <span>{t('hero.eyebrow')}</span>
         </div>
+      </div>
+    </div>
 
+    <!-- Carousel: FULL WIDTH -->
+    <div
+      id="hero-carousel"
+      class="relative w-full"
+      style="overflow: hidden; min-height: clamp(300px, 40vw, 500px);"
+      role="region"
+      aria-live="polite"
+      aria-roledescription="carousel"
+      aria-label={t('hero.eyebrow')}
+    >
+      <div
+        id="hero-slide-1"
+        class="hero-slide is-active"
+        role="tabpanel"
+        aria-roledescription="slide"
+        aria-label="1 de 5"
+      >
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div class="max-w-4xl">
             <h1
-        id="hero-headline"
+              class="font-display leading-[0.98] mb-8"
-        class="font-display leading-[0.98] mb-8 opacity-0"
               style="font-size: clamp(2.75rem, 7vw, 5.5rem); color: var(--hds-fg); letter-spacing: -0.025em; font-weight: 400;"
             >
-        {t('hero.title')}
+              {t('hero.slide1.title')}
             </h1>
-
             <p
-        id="hero-body"
+              class="text-lg md:text-xl leading-relaxed max-w-2xl"
-        class="text-lg md:text-xl leading-relaxed mb-10 max-w-2xl opacity-0"
               style="color: var(--hds-fg-soft);"
             >
-        {t('hero.body')}
+              {t('hero.slide1.body')}
             </p>
+          </div>
+        </div>
+      </div>
+
+      <div
+        id="hero-slide-2"
+        class="hero-slide"
+        role="tabpanel"
+        aria-roledescription="slide"
+        aria-label="2 de 5"
+        aria-hidden="true"
+      >
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div class="max-w-4xl">
+            <div
+              class="font-display leading-[0.98] mb-8"
+              style="font-size: clamp(2.75rem, 7vw, 5.5rem); color: var(--hds-fg); letter-spacing: -0.025em; font-weight: 400;"
+            >
+              {t('hero.slide2.title')}
+            </div>
+            <p
+              class="text-lg md:text-xl leading-relaxed max-w-2xl"
+              style="color: var(--hds-fg-soft);"
+            >
+              {t('hero.slide2.body')}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div
+        id="hero-slide-3"
+        class="hero-slide"
+        role="tabpanel"
+        aria-roledescription="slide"
+        aria-label="3 de 5"
+        aria-hidden="true"
+      >
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div class="max-w-4xl">
+            <div
+              class="font-display leading-[0.98] mb-8"
+              style="font-size: clamp(2.75rem, 7vw, 5.5rem); color: var(--hds-fg); letter-spacing: -0.025em; font-weight: 400;"
+            >
+              {t('hero.slide3.title')}
+            </div>
+            <p
+              class="text-lg md:text-xl leading-relaxed max-w-2xl"
+              style="color: var(--hds-fg-soft);"
+            >
+              {t('hero.slide3.body')}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div
+        id="hero-slide-4"
+        class="hero-slide"
+        role="tabpanel"
+        aria-roledescription="slide"
+        aria-label="4 de 5"
+        aria-hidden="true"
+      >
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div class="max-w-4xl">
+            <div
+              class="font-display leading-[0.98] mb-8"
+              style="font-size: clamp(2.75rem, 7vw, 5.5rem); color: var(--hds-fg); letter-spacing: -0.025em; font-weight: 400;"
+            >
+              {t('hero.slide4.title')}
+            </div>
+            <p
+              class="text-lg md:text-xl leading-relaxed max-w-2xl"
+              style="color: var(--hds-fg-soft);"
+            >
+              {t('hero.slide4.body')}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div
+        id="hero-slide-5"
+        class="hero-slide"
+        role="tabpanel"
+        aria-roledescription="slide"
+        aria-label="5 de 5"
+        aria-hidden="true"
+      >
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div class="max-w-4xl">
+            <div
+              class="font-display leading-[0.98] mb-8"
+              style="font-size: clamp(2.75rem, 7vw, 5.5rem); color: var(--hds-fg); letter-spacing: -0.025em; font-weight: 400;"
+            >
+              {t('hero.slide5.title')}
+            </div>
+            <p
+              class="text-lg md:text-xl leading-relaxed max-w-2xl"
+              style="color: var(--hds-fg-soft);"
+            >
+              {t('hero.slide5.body')}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Progress bars, CTAs, badges -->
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="max-w-4xl">
+        <div id="hero-progress" class="flex gap-2 mt-6 mb-10" role="tablist" aria-label="Hero slides">
+          <button class="hero-bar" role="tab" aria-selected="true" aria-label={t('hero.slide1.title')} data-slide="0">
+            <span class="hero-bar-fill"></span>
+          </button>
+          <button class="hero-bar" role="tab" aria-selected="false" aria-label={t('hero.slide2.title')} data-slide="1">
+            <span class="hero-bar-fill"></span>
+          </button>
+          <button class="hero-bar" role="tab" aria-selected="false" aria-label={t('hero.slide3.title')} data-slide="2">
+            <span class="hero-bar-fill"></span>
+          </button>
+          <button class="hero-bar" role="tab" aria-selected="false" aria-label={t('hero.slide4.title')} data-slide="3">
+            <span class="hero-bar-fill"></span>
+          </button>
+          <button class="hero-bar" role="tab" aria-selected="false" aria-label={t('hero.slide5.title')} data-slide="4">
+            <span class="hero-bar-fill"></span>
+          </button>
+        </div>
 
         <div id="hero-ctas" class="flex flex-col sm:flex-row gap-4 mb-14 opacity-0">
           <a href="/planes/" class="btn-primary">
@@ -147,6 +297,7 @@ const { t, whatsappUrl } = Astro.props;
         </div>
       </div>
     </div>
+  </div>
 
   <!-- Scroll indicator -->
   <div id="hero-scroll-indicator" class="absolute bottom-8 left-1/2 -translate-x-1/2 opacity-0 pointer-events-none" aria-hidden="true">
@@ -165,8 +316,110 @@ const { t, whatsappUrl } = Astro.props;
   const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 
   if (!prefersReduced) {
-    const heroTimeline = gsap.timeline({ delay: 0.3 });
+    const slides = document.querySelectorAll('.hero-slide');
+    const fills = document.querySelectorAll('.hero-bar-fill');
+    const bars = document.querySelectorAll('.hero-bar');
+    const SLIDE_COUNT = 5;
+    const SLIDE_DURATION = 3.5;
+    const TRANSITION_DURATION = 1.3;
+    let currentSlide = 0;
+    let autoplayTween: gsap.core.Tween | null = null;
+    let isPaused = false;
+    let isTransitioning = false;
 
+    gsap.set(slides, { x: '100%' });
+    gsap.set(slides[0], { x: 0 });
+
+    function goToSlide(next: number) {
+      if (isTransitioning || next === currentSlide) return;
+      isTransitioning = true;
+
+      const prev = currentSlide;
+      const currentEl = slides[prev];
+      const nextEl = slides[next];
+
+      gsap.set(fills[prev], { scaleX: 0 });
+
+      currentEl.setAttribute('aria-hidden', 'true');
+      bars[prev].setAttribute('aria-selected', 'false');
+
+      nextEl.removeAttribute('aria-hidden');
+      bars[next].setAttribute('aria-selected', 'true');
+
+      gsap.set(nextEl, { x: '100%' });
+
+      const tl = gsap.timeline({
+        onComplete: () => {
+          currentEl.classList.remove('is-active');
+          gsap.set(currentEl, { x: '100%' });
+          isTransitioning = false;
+          startAutoplay();
+        },
+      });
+
+      tl.to(currentEl, {
+        x: '-100%',
+        duration: TRANSITION_DURATION,
+        ease: 'power3.in',
+      })
+      .to(nextEl, {
+        x: 0,
+        duration: TRANSITION_DURATION,
+        ease: 'power3.out',
+        onStart: () => {
+          nextEl.classList.add('is-active');
+        },
+      }, 0.65);
+
+      currentSlide = next;
+    }
+
+    function startAutoplay() {
+      if (autoplayTween) autoplayTween.kill();
+      gsap.set(fills[currentSlide], { scaleX: 0 });
+      autoplayTween = gsap.to(fills[currentSlide], {
+        scaleX: 1,
+        duration: SLIDE_DURATION,
+        ease: 'none',
+        onComplete: () => {
+          goToSlide((currentSlide + 1) % SLIDE_COUNT);
+        },
+      });
+      if (isPaused) autoplayTween.pause();
+    }
+
+    bars.forEach((bar) => {
+      bar.addEventListener('click', () => {
+        const idx = parseInt(bar.dataset.slide || '0', 10);
+        if (idx !== currentSlide) {
+          goToSlide(idx);
+        }
+      });
+    });
+
+    const hoverZone = document.getElementById('hero-carousel');
+    if (hoverZone) {
+      hoverZone.addEventListener('mouseenter', () => {
+        isPaused = true;
+        if (autoplayTween) autoplayTween.pause();
+      });
+      hoverZone.addEventListener('mouseleave', () => {
+        isPaused = false;
+        if (autoplayTween) autoplayTween.resume();
+      });
+    }
+
+    gsap.to('#hero-float-top', {
+      y: -30, x: -15, duration: 3, ease: 'sine.inOut', repeat: -1, yoyo: true,
+    });
+    gsap.to('#hero-float-mid', {
+      y: 25, x: 12, duration: 4, ease: 'sine.inOut', repeat: -1, yoyo: true, delay: 0.5,
+    });
+    gsap.to('#hero-float-bot', {
+      y: -20, x: -10, duration: 3.5, ease: 'sine.inOut', repeat: -1, yoyo: true, delay: 1,
+    });
+
+    const heroTimeline = gsap.timeline({ delay: 0.3 });
     heroTimeline
       .to('#hero-glass-ring', {
         opacity: 1,
@@ -180,18 +433,6 @@ const { t, whatsappUrl } = Astro.props;
         duration: 0.6,
         ease: 'power2.out',
       }, '-=0.8')
-      .to('#hero-headline', {
-        opacity: 1,
-        y: 0,
-        duration: 0.8,
-        ease: 'power3.out',
-      }, '-=0.1')
-      .to('#hero-body', {
-        opacity: 1,
-        y: 0,
-        duration: 0.7,
-        ease: 'power2.out',
-      }, '-=0.2')
       .to('#hero-ctas', {
         opacity: 1,
         y: 0,
@@ -208,38 +449,15 @@ const { t, whatsappUrl } = Astro.props;
         duration: 0.6,
       }, '-=0.2');
 
-    // Parallax floating shapes
+    startAutoplay();
-    gsap.to('#hero-float-top', {
-      y: -30,
-      x: -15,
-      duration: 3,
-      ease: 'sine.inOut',
-      repeat: -1,
-      yoyo: true,
-    });
-    gsap.to('#hero-float-mid', {
-      y: 25,
-      x: 12,
-      duration: 4,
-      ease: 'sine.inOut',
-      repeat: -1,
-      yoyo: true,
-      delay: 0.5,
-    });
-    gsap.to('#hero-float-bot', {
-      y: -20,
-      x: -10,
-      duration: 3.5,
-      ease: 'sine.inOut',
-      repeat: -1,
-      yoyo: true,
-      delay: 1,
-    });
   } else {
-    // Show everything without animation
+    document.querySelectorAll('#hero-eyebrow, #hero-ctas, #hero-badges, #hero-scroll-indicator, #hero-glass-ring').forEach(el => {
-    document.querySelectorAll('#hero-eyebrow, #hero-headline, #hero-body, #hero-ctas, #hero-badges, #hero-scroll-indicator, #hero-glass-ring').forEach(el => {
       (el as HTMLElement).style.opacity = '1';
     });
+    const firstSlide = document.querySelector('.hero-slide');
+    if (firstSlide) (firstSlide as HTMLElement).style.transform = 'translateX(0)';
+    const firstFill = document.querySelector('.hero-bar-fill');
+    if (firstFill) (firstFill as HTMLElement).style.transform = 'scaleX(1)';
   }
 </script>
 
@@ -247,12 +465,6 @@ const { t, whatsappUrl } = Astro.props;
   #hero-eyebrow {
     transform: translateY(16px);
   }
-  #hero-headline {
-    transform: translateY(24px);
-  }
-  #hero-body {
-    transform: translateY(20px);
-  }
   #hero-ctas {
     transform: translateY(16px);
   }
@@ -263,16 +475,47 @@ const { t, whatsappUrl } = Astro.props;
     transform: translate(-50%, -50%) scale(0.85);
   }
 
-  /* Cloud opacity — light mode (dark mode keeps low opacity) */
+  #hero-carousel {
+    position: relative;
+    overflow: hidden;
+    min-height: clamp(300px, 40vw, 500px);
+  }
+  .hero-slide {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    transform: translateX(100%);
+  }
+  .hero-slide.is-active {
+    transform: translateX(0);
+  }
+
+  .hero-bar {
+    flex: 1;
+    height: 2px;
+    background: var(--hds-fg-muted);
+    opacity: 0.25;
+    border-radius: 1px;
+    overflow: hidden;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+  }
+  .hero-bar-fill {
+    display: block;
+    height: 100%;
+    background: var(--color-hds-naranja);
+    transform: scaleX(0);
+    transform-origin: left;
+  }
+
   .cloud-p1 { opacity: 0.18; }
   .cloud-p2 { opacity: 0.12; }
 
-  /* Floating shapes — dark mode keeps subtle opacity */
   #hero-float-top { opacity: 0.30; }
   #hero-float-mid { opacity: 0.25; }
   #hero-float-bot { opacity: 0.20; }
 
-  /* LIGHT MODE OVERRIDES — cloud more visible, shapes more opaque, badges darker */
   :root:not(.dark) .cloud-p1 { opacity: 0.72; }
   :root:not(.dark) .cloud-p2 { opacity: 0.55; }
   :root:not(.dark) #hero-float-top { opacity: 0.55; }
@@ -280,4 +523,13 @@ const { t, whatsappUrl } = Astro.props;
   :root:not(.dark) #hero-float-bot { opacity: 0.45; }
   :root:not(.dark) #hero-badges { color: var(--hds-fg-soft) !important; }
 
+  @media (prefers-reduced-motion: reduce) {
+    .hero-slide {
+      transform: none;
+      transition: transform 0.3s ease;
+    }
+    .hero-bar-fill {
+      transition: transform 0.3s ease;
+    }
+  }
 </style>

src/components/StatsSection.astro

@@ -15,8 +15,8 @@ const stats = [
 ];
 
 const values = lang === 'en'
-  ? ['26+', '100+', '4', 'Senior']
+  ? ['26+', '100+', '4', 'Pro']
-  : ['26+', '100+', '4', 'Senior'];
+  : ['26+', '100+', '4', 'Pro'];
 ---
 <section class="py-20 md:py-24" style="background: var(--hds-bg); border-top: 1px solid var(--hds-line); border-bottom: 1px solid var(--hds-line);">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

src/i18n/ui.ts

@@ -9,6 +9,16 @@ export const ui = {
     'hero.eyebrow': 'Premium hosting · Desde 2000',
     'hero.title': 'Alojamiento en la nube que te conoce.',
     'hero.body': 'Soporte humano senior en Maldonado, Uruguay. Del otro lado hay una persona que conoce tu proyecto, no un ticket automático. La misma tecnología que los gigantes, con la cercanía que nos diferencia.',
+    'hero.slide1.title': 'Alojamiento en la nube que te conoce.',
+    'hero.slide1.body': 'Soporte humano senior en Maldonado. Del otro lado hay una persona que conoce tu proyecto, no un ticket automático.',
+    'hero.slide2.title': 'Todo el milenio acompañándote en el crecimiento de tu empresa.',
+    'hero.slide2.body': 'Desde 2000 trabajando en hosting, correo y soporte senior para que tu web no sea un problema sino una solución.',
+    'hero.slide3.title': 'Cuando algo falla, hablás con quien lo resuelve.',
+    'hero.slide3.body': 'Técnicos humanos. Respuesta en horas, no en colas. Sabemos de cPanel, WordPress y el stack que usás vos.',
+    'hero.slide4.title': 'La misma tecnología que los grandes, en tu idioma y sin intermediarios.',
+    'hero.slide4.body': 'CloudLinux, cPanel y monitoreo 24/7. Rendimiento de datacenter con alguien local cuando lo necesitás.',
+    'hero.slide5.title': 'Más de 20 años apoyando a emprendedores.',
+    'hero.slide5.body': 'Misma gente, misma infraestructura, sin call center anónimo.',
     'hero.ctaPrimary': 'Ver planes',
     'hero.ctaSecondary': 'Hablar por WhatsApp',
     'hero.badge26': '26+ años',
@@ -22,7 +32,7 @@ export const ui = {
     'stats.sub2': 'Webs, e-commerce, infra',
     'stats.label3': 'Países',
     'stats.sub3': 'Canadá, USA, Alemania, UY',
-    'stats.label4': 'Equipo senior',
+    'stats.label4': 'Equipo de profesionales',
     'stats.sub4': 'SysAdmin / SRE',
     'diff.eyebrow': 'La diferencia',
     'diff.title': 'Por qué elegirnos',
@@ -75,6 +85,16 @@ export const ui = {
     'hero.eyebrow': 'Premium hosting · Since 2000',
     'hero.title': 'Cloud hosting that knows you.',
     'hero.body': 'Senior human support in Maldonado, Uruguay. There is a real person who knows your project on the other side, not an automatic ticket. The same technology as the tech giants, with the closeness that sets us apart.',
+    'hero.slide1.title': 'Cloud hosting that knows you.',
+    'hero.slide1.body': 'Senior human support in Maldonado. There is a real person who knows your project on the other side, not an automatic ticket.',
+    'hero.slide2.title': 'Supporting your growth for the entire millennium.',
+    'hero.slide2.body': 'Since 2000 working in hosting, email and senior support so your web is a solution, not a problem.',
+    'hero.slide3.title': 'When something breaks, you talk to the one who fixes it.',
+    'hero.slide3.body': 'Human engineers. Response in hours, not queues. We know cPanel, WordPress and the stack you run.',
+    'hero.slide4.title': 'The same technology as the big players, in your language and no middlemen.',
+    'hero.slide4.body': 'CloudLinux, cPanel and 24/7 monitoring. Datacenter performance with someone local when you need it.',
+    'hero.slide5.title': 'Over 20 years backing entrepreneurs.',
+    'hero.slide5.body': 'Same people, same infrastructure, no anonymous call center.',
     'hero.ctaPrimary': 'View plans',
     'hero.ctaSecondary': 'Chat on WhatsApp',
     'hero.badge26': '26+ years',
@@ -88,7 +108,7 @@ export const ui = {
     'stats.sub2': 'Websites, e-commerce, infra',
     'stats.label3': 'Countries',
     'stats.sub3': 'Canada, USA, Germany, UY',
-    'stats.label4': 'Senior team',
+    'stats.label4': 'Professional team',
     'stats.sub4': 'SysAdmin / SRE',
     'diff.eyebrow': 'The difference',
     'diff.title': 'Why choose us',