Cronología de la Empresa e Historia de Desarrollo

Un componente de cronología elegante e interactivo que muestra el viaje de tu empresa, hitos principales y logros con animaciones de desplazamiento suaves y diseño responsivo.

Características

• Cronología Interactiva: Animaciones suaves activadas por desplazamiento
• Diseño Responsivo: Se adapta a todos los tamaños de pantalla con enfoque mobile-first
• Tarjetas de Hitos: Tarjetas de contenido rico con imágenes, fechas y descripciones
• Indicador de Progreso: Línea de progreso visual que se llena mientras el usuario se desplaza
• Efectos Hover: Micro-interacciones atractivas
• Accesibilidad: Amigable con lectores de pantalla con etiquetas ARIA apropiadas
• Personalizable: Fácil de modificar contenido, colores y diseño
• Optimizado para Rendimiento: Animaciones eficientes usando transformaciones CSS

HTML

<section class="company-timeline">
  <div class="container">
    <!-- Encabezado -->
    <div class="timeline-header">
      <h2 class="timeline-title">Nuestro Viaje</h2>
      <p class="timeline-subtitle">Descubre los hitos que moldearon la evolución de nuestra empresa</p>
    </div>

    <!-- Contenedor de Cronología -->
    <div class="timeline-container">
      <!-- Línea de Progreso -->
      <div class="timeline-progress">
        <div class="progress-line" id="progressLine"></div>
      </div>

      <!-- Elementos de Cronología -->
      <div class="timeline-items">
        <!-- Hito 1 -->
        <div class="timeline-item" data-year="2019">
          <div class="timeline-marker">
            <div class="marker-dot"></div>
            <div class="marker-year">2019</div>
          </div>
          <div class="timeline-content">
            <div class="content-card">
              <div class="card-image">
                <img src="https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=400&h=250&fit=crop" alt="Fundación de la Empresa" loading="lazy">
                <div class="image-overlay">
                  <svg class="overlay-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                  </svg>
                </div>
              </div>
              <div class="card-content">
                <h3 class="card-title">Fundación de la Empresa</h3>
                <p class="card-description">
                  Comenzamos con una visión de revolucionar la industria tecnológica. Nuestros fundadores 
                  establecieron la empresa con solo 3 empleados en una pequeña oficina de garaje.
                </p>
                <div class="card-stats">
                  <div class="stat">
                    <span class="stat-number">3</span>
                    <span class="stat-label">Empleados</span>
                  </div>
                  <div class="stat">
                    <span class="stat-number">1</span>
                    <span class="stat-label">Oficina</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Hito 2 -->
        <div class="timeline-item" data-year="2020">
          <div class="timeline-marker">
            <div class="marker-dot"></div>
            <div class="marker-year">2020</div>
          </div>
          <div class="timeline-content">
            <div class="content-card">
              <div class="card-image">
                <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?w=400&h=250&fit=crop" alt="Lanzamiento del Primer Producto" loading="lazy">
                <div class="image-overlay">
                  <svg class="overlay-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                  </svg>
                </div>
              </div>
              <div class="card-content">
                <h3 class="card-title">Lanzamiento del Primer Producto</h3>
                <p class="card-description">
                  Lanzamos exitosamente nuestro producto insignia, ganando más de 10,000 usuarios 
                  en el primer mes y estableciendo nuestra presencia en el mercado.
                </p>
                <div class="card-stats">
                  <div class="stat">
                    <span class="stat-number">10K+</span>
                    <span class="stat-label">Usuarios</span>
                  </div>
                  <div class="stat">
                    <span class="stat-number">15</span>
                    <span class="stat-label">Equipo</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Hito 3 -->
        <div class="timeline-item" data-year="2021">
          <div class="timeline-marker">
            <div class="marker-dot"></div>
            <div class="marker-year">2021</div>
          </div>
          <div class="timeline-content">
            <div class="content-card">
              <div class="card-image">
                <img src="https://images.unsplash.com/photo-1559136555-9303baea8ebd?w=400&h=250&fit=crop" alt="Financiación Serie A" loading="lazy">
                <div class="image-overlay">
                  <svg class="overlay-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                </div>
              </div>
              <div class="card-content">
                <h3 class="card-title">Financiación Serie A</h3>
                <p class="card-description">
                  Aseguramos $5M en financiación Serie A, permitiendo una expansión rápida y 
                  el desarrollo de nuevas características innovadoras para nuestra plataforma.
                </p>
                <div class="card-stats">
                  <div class="stat">
                    <span class="stat-number">$5M</span>
                    <span class="stat-label">Financiación</span>
                  </div>
                  <div class="stat">
                    <span class="stat-number">50K+</span>
                    <span class="stat-label">Usuarios</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Hito 4 -->
        <div class="timeline-item" data-year="2022">
          <div class="timeline-marker">
            <div class="marker-dot"></div>
            <div class="marker-year">2022</div>
          </div>
          <div class="timeline-content">
            <div class="content-card">
              <div class="card-image">
                <img src="https://images.unsplash.com/photo-1521737711867-e3b97375f902?w=400&h=250&fit=crop" alt="Expansión Global" loading="lazy">
                <div class="image-overlay">
                  <svg class="overlay-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                </div>
              </div>
              <div class="card-content">
                <h3 class="card-title">Expansión Global</h3>
                <p class="card-description">
                  Expandimos operaciones a 15 países, abrimos oficinas internacionales, 
                  y alcanzamos más de 200,000 usuarios activos en todo el mundo.
                </p>
                <div class="card-stats">
                  <div class="stat">
                    <span class="stat-number">15</span>
                    <span class="stat-label">Países</span>
                  </div>
                  <div class="stat">
                    <span class="stat-number">200K+</span>
                    <span class="stat-label">Usuarios</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Hito 5 -->
        <div class="timeline-item" data-year="2023">
          <div class="timeline-marker">
            <div class="marker-dot"></div>
            <div class="marker-year">2023</div>
          </div>
          <div class="timeline-content">
            <div class="content-card">
              <div class="card-image">
                <img src="https://images.unsplash.com/photo-1485827404703-89b55fcc595e?w=400&h=250&fit=crop" alt="Integración de IA" loading="lazy">
                <div class="image-overlay">
                  <svg class="overlay-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                  </svg>
                </div>
              </div>
              <div class="card-content">
                <h3 class="card-title">Integración de IA</h3>
                <p class="card-description">
                  Lanzamos características impulsadas por IA, revolucionando la experiencia del usuario 
                  y posicionándonos como líderes de la industria en innovación.
                </p>
                <div class="card-stats">
                  <div class="stat">
                    <span class="stat-number">500K+</span>
                    <span class="stat-label">Usuarios</span>
                  </div>
                  <div class="stat">
                    <span class="stat-number">100+</span>
                    <span class="stat-label">Equipo</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Hito 6 -->
        <div class="timeline-item" data-year="2024">
          <div class="timeline-marker">
            <div class="marker-dot"></div>
            <div class="marker-year">2024</div>
          </div>
          <div class="timeline-content">
            <div class="content-card">
              <div class="card-image">
                <img src="https://images.unsplash.com/photo-1552664730-d307ca884978?w=400&h=250&fit=crop" alt="Visión Futura" loading="lazy">
                <div class="image-overlay">
                  <svg class="overlay-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
                  </svg>
                </div>
              </div>
              <div class="card-content">
                <h3 class="card-title">Visión Futura</h3>
                <p class="card-description">
                  Continuamos nuestra misión de innovar y liderar la industria, 
                  con emocionantes nuevos productos y características en el horizonte.
                </p>
                <div class="card-stats">
                  <div class="stat">
                    <span class="stat-number">1M+</span>
                    <span class="stat-label">Meta Usuarios</span>
                  </div>
                  <div class="stat">
                    <span class="stat-number">∞</span>
                    <span class="stat-label">Posibilidades</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

CSS

.company-timeline {
  padding: 80px 0;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  position: relative;
  overflow: hidden;
}

.company-timeline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><defs><pattern id="dots" width="60" height="60" patternUnits="userSpaceOnUse"><circle cx="30" cy="30" r="1.5" fill="%23ffffff" opacity="0.3"/></pattern></defs><rect width="60" height="60" fill="url(%23dots)"/></svg>') repeat;
  pointer-events: none;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}

/* Encabezado de Cronología */
.timeline-header {
  text-align: center;
  margin-bottom: 80px;
}

.timeline-title {
  font-size: 3.5rem;
  font-weight: 700;
  color: #2d3748;
  margin-bottom: 16px;
  background: linear-gradient(45deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.timeline-subtitle {
  font-size: 1.25rem;
  color: #4a5568;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Contenedor de Cronología */
.timeline-container {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

/* Línea de Progreso */
.timeline-progress {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #e2e8f0;
  transform: translateX(-50%);
  border-radius: 2px;
  overflow: hidden;
}

.progress-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
  border-radius: 2px;
  transition: height 0.3s ease;
}

/* Elementos de Cronología */
.timeline-items {
  position: relative;
}

.timeline-item {
  position: relative;
  margin-bottom: 60px;
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.6s ease;
}

.timeline-item.animate {
  opacity: 1;
  transform: translateY(0);
}

.timeline-item:nth-child(even) .timeline-content {
  margin-left: 50%;
  padding-left: 40px;
}

.timeline-item:nth-child(odd) .timeline-content {
  margin-right: 50%;
  padding-right: 40px;
  text-align: right;
}

/* Marcador de Cronología */
.timeline-marker {
  position: absolute;
  left: 50%;
  top: 30px;
  transform: translateX(-50%);
  z-index: 10;
}

.marker-dot {
  width: 20px;
  height: 20px;
  background: linear-gradient(45deg, #667eea, #764ba2);
  border-radius: 50%;
  border: 4px solid white;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  transition: all 0.3s ease;
}

.timeline-item.animate .marker-dot {
  transform: scale(1.2);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.marker-year {
  position: absolute;
  top: 35px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(45deg, #667eea, #764ba2);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

/* Tarjeta de Contenido */
.content-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border: 1px solid #e2e8f0;
}

.content-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.card-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.content-card:hover .card-image img {
  transform: scale(1.05);
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(102, 126, 234, 0.8), rgba(118, 75, 162, 0.8));
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.content-card:hover .image-overlay {
  opacity: 1;
}

.overlay-icon {
  width: 48px;
  height: 48px;
  color: white;
  stroke-width: 1.5;
}

.card-content {
  padding: 30px;
}

.card-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 12px;
}

.card-description {
  font-size: 1rem;
  color: #4a5568;
  line-height: 1.6;
  margin-bottom: 20px;
}

.card-stats {
  display: flex;
  gap: 30px;
}

.stat {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: #667eea;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 0.875rem;
  color: #718096;
  font-weight: 500;
}

/* Diseño Responsivo */
@media (max-width: 768px) {
  .company-timeline {
    padding: 60px 0;
  }
  
  .timeline-title {
    font-size: 2.5rem;
  }
  
  .timeline-progress {
    left: 30px;
  }
  
  .timeline-marker {
    left: 30px;
  }
  
  .timeline-item:nth-child(even) .timeline-content,
  .timeline-item:nth-child(odd) .timeline-content {
    margin-left: 70px;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    text-align: left;
  }
  
  .marker-year {
    left: 80px;
    transform: none;
  }
  
  .card-stats {
    gap: 20px;
  }
}

@media (max-width: 480px) {
  .timeline-title {
    font-size: 2rem;
  }
  
  .card-content {
    padding: 20px;
  }
  
  .card-stats {
    flex-direction: column;
    gap: 15px;
  }
}

JavaScript

// Controlador de Animación de Cronología
class TimelineController {
  constructor() {
    this.timelineItems = document.querySelectorAll('.timeline-item');
    this.progressLine = document.getElementById('progressLine');
    this.observerOptions = {
      threshold: 0.3,
      rootMargin: '0px 0px -100px 0px'
    };
    
    this.init();
  }

  init() {
    this.setupIntersectionObserver();
    this.setupScrollProgress();
    this.addInteractiveEffects();
  }

  setupIntersectionObserver() {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('animate');
          this.updateProgress();
        }
      });
    }, this.observerOptions);

    this.timelineItems.forEach(item => {
      observer.observe(item);
    });
  }

  setupScrollProgress() {
    window.addEventListener('scroll', () => {
      this.updateProgress();
    });
  }

  updateProgress() {
    const timelineContainer = document.querySelector('.timeline-container');
    const containerRect = timelineContainer.getBoundingClientRect();
    const containerTop = containerRect.top + window.pageYOffset;
    const containerHeight = containerRect.height;
    const scrollTop = window.pageYOffset;
    const windowHeight = window.innerHeight;
    
    // Calcular progreso basado en posición de desplazamiento
    const scrollProgress = Math.max(0, Math.min(1, 
      (scrollTop + windowHeight - containerTop) / (containerHeight + windowHeight)
    ));
    
    this.progressLine.style.height = `${scrollProgress * 100}%`;
  }

  addInteractiveEffects() {
    this.timelineItems.forEach((item, index) => {
      const card = item.querySelector('.content-card');
      
      // Agregar efecto de sonido hover (opcional)
      card.addEventListener('mouseenter', () => {
        this.playHoverSound();
      });
      
      // Agregar interacción de clic
      card.addEventListener('click', () => {
        this.handleCardClick(item, index);
      });
      
      // Agregar navegación por teclado
      card.setAttribute('tabindex', '0');
      card.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          this.handleCardClick(item, index);
        }
      });
    });
  }

  playHoverSound() {
    // Opcional: Agregar sonido sutil de hover
    // const audio = new Audio('data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBjiR1/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+DyvmwhBSuBzvLZiTYIG2m98OScTgwOUarm7blmGgU7k9n1unEiBC13yO/eizEIHWq+8+OWT');
    // audio.volume = 0.1;
    // audio.play().catch(() => {});
  }

  handleCardClick(item, index) {
    const year = item.getAttribute('data-year');
    const title = item.querySelector('.card-title').textContent;
    
    // Agregar efecto de ondulación
    this.createRippleEffect(item.querySelector('.content-card'));
    
    // Opcional: Mostrar modal detallado o navegar a página detallada
    console.log(`Clic en hito: ${title} (${year})`);
    
    // Ejemplo: Mostrar más detalles
    this.showMilestoneDetails(item);
  }

  createRippleEffect(element) {
    const ripple = document.createElement('div');
    const rect = element.getBoundingClientRect();
    const size = Math.max(rect.width, rect.height);
    
    ripple.style.cssText = `
      position: absolute;
      border-radius: 50%;
      background: rgba(102, 126, 234, 0.3);
      transform: scale(0);
      animation: ripple 0.6s linear;
      pointer-events: none;
      width: ${size}px;
      height: ${size}px;
      left: 50%;
      top: 50%;
      margin-left: ${-size/2}px;
      margin-top: ${-size/2}px;
    `;
    
    element.style.position = 'relative';
    element.appendChild(ripple);
    
    setTimeout(() => {
      ripple.remove();
    }, 600);
  }

  showMilestoneDetails(item) {
    const card = item.querySelector('.content-card');
    const isExpanded = card.classList.contains('expanded');
    
    // Alternar estado expandido
    if (isExpanded) {
      card.classList.remove('expanded');
      this.collapseCard(card);
    } else {
      // Colapsar otras tarjetas primero
      document.querySelectorAll('.content-card.expanded').forEach(expandedCard => {
        expandedCard.classList.remove('expanded');
        this.collapseCard(expandedCard);
      });
      
      card.classList.add('expanded');
      this.expandCard(card);
    }
  }

  expandCard(card) {
    // Agregar contenido expandido si no existe
    if (!card.querySelector('.expanded-content')) {
      const expandedContent = document.createElement('div');
      expandedContent.className = 'expanded-content';
      expandedContent.innerHTML = `
        <div class="expanded-divider"></div>
        <h4>Logros Clave:</h4>
        <ul>
          <li>Logro del hito 1</li>
          <li>Logro del hito 2</li>
          <li>Logro del hito 3</li>
        </ul>
        <button class="learn-more-btn">Saber Más</button>
      `;
      
      card.querySelector('.card-content').appendChild(expandedContent);
    }
    
    // Animar expansión
    const expandedContent = card.querySelector('.expanded-content');
    expandedContent.style.maxHeight = '0';
    expandedContent.style.opacity = '0';
    expandedContent.style.overflow = 'hidden';
    expandedContent.style.transition = 'all 0.3s ease';
    
    setTimeout(() => {
      expandedContent.style.maxHeight = '200px';
      expandedContent.style.opacity = '1';
    }, 10);
  }

  collapseCard(card) {
    const expandedContent = card.querySelector('.expanded-content');
    if (expandedContent) {
      expandedContent.style.maxHeight = '0';
      expandedContent.style.opacity = '0';
      
      setTimeout(() => {
        expandedContent.remove();
      }, 300);
    }
  }
}

// Desplazamiento suave para navegación de cronología
function scrollToTimelineItem(year) {
  const item = document.querySelector(`[data-year="${year}"]`);
  if (item) {
    item.scrollIntoView({
      behavior: 'smooth',
      block: 'center'
    });
  }
}

// Inicializar cronología cuando el DOM esté cargado
document.addEventListener('DOMContentLoaded', () => {
  new TimelineController();
  
  // Agregar CSS para animaciones
  const style = document.createElement('style');
  style.textContent = `
    @keyframes ripple {
      to {
        transform: scale(4);
        opacity: 0;
      }
    }
    
    .expanded-content {
      padding-top: 20px;
    }
    
    .expanded-divider {
      height: 1px;
      background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
      margin-bottom: 15px;
    }
    
    .expanded-content h4 {
      font-size: 1.1rem;
      font-weight: 600;
      color: #2d3748;
      margin-bottom: 10px;
    }
    
    .expanded-content ul {
      list-style: none;
      padding: 0;
      margin-bottom: 15px;
    }
    
    .expanded-content li {
      padding: 5px 0;
      color: #4a5568;
      position: relative;
      padding-left: 20px;
    }
    
    .expanded-content li::before {
      content: '✓';
      position: absolute;
      left: 0;
      color: #667eea;
      font-weight: bold;
    }
    
    .learn-more-btn {
      background: linear-gradient(45deg, #667eea, #764ba2);
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 6px;
      font-size: 0.875rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    
    .learn-more-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }
  `;
  document.head.appendChild(style);
});

Opciones de Personalización

Contenido

• Elementos de Cronología: Agregar o modificar hitos en el HTML
• Imágenes: Reemplazar URLs de Unsplash con tus propias imágenes
• Estadísticas: Actualizar las estadísticas en cada tarjeta de hito
• Años: Modificar los atributos data-year

Estilo

• Colores: Cambiar los colores de gradiente en todo el CSS
• Diseño: Ajustar la orientación de la cronología (vertical/horizontal)
• Diseño de Tarjetas: Modificar el estilo de las tarjetas y efectos hover
• Velocidad de Animación: Ajustar las duraciones de transición

Funcionalidad

• Velocidad de Desplazamiento: Modificar el cálculo de progreso en updateProgress()
• Disparadores de Animación: Ajustar el umbral de observerOptions
• Características Interactivas: Agregar manejadores de clic personalizados o pantallas modales

Compatibilidad de Navegadores

• ✅ Chrome 60+
• ✅ Firefox 55+
• ✅ Safari 12+
• ✅ Edge 79+
• ⚠️ IE 11 (con polyfills para Intersection Observer)

Notas de Rendimiento

• Usa Intersection Observer para animaciones eficientes basadas en desplazamiento
• Transformaciones CSS para animaciones suaves a 60fps
• Carga perezosa para imágenes
• Optimizado para dispositivos móviles
• Huella mínima de JavaScript