copia Inicio

body { margin: 0; padding: 0; overflow-x: hidden; /* Elimina estrictamente la barra de scroll horizontal */ font-family: Arial, sans-serif; background-color: #fafafa; }.timeline-container { width: 100%; max-width: 1100px; margin: 50px auto; padding: 180px 20px; /* Amplio espacio vertical para las tarjetas y el zoom */ overflow-x: hidden; }.timeline { position: relative; display: flex; justify-content: space-between; align-items: center; /* Centra todo en el eje Y */ width: 100%; margin: 0; padding: 0; }/* La línea cian generada independientemente en el fondo */ .timeline::before { content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; height: 6px; background: #50E3C2; z-index: 1; border-radius: 10px; }/* Contenedor de cada año */ .timeline-item { position: relative; z-index: 2; /* Siempre por encima de la línea */ display: flex; justify-content: center; align-items: center; width: 80px; height: 80px; }/* Estilo base para los puntos interactivos */ .timeline-point { cursor: pointer; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 3; position: relative; }/* Estilo específico para los años que son solo TEXTO (1997, 2002, 2026) */ .text-point { color: #004aad; font-weight: 900; font-size: 20px; background: transparent; line-height: 1; }/* Estilo específico para los años que son IMÁGENES (1996, 2020, 2025) */ .img-point { height: 40px; /* Ajusta el tamaño base de la imagen para que coincida con el texto */ width: auto; object-fit: contain; display: block; }/* Efecto Hover espectacular sobre la línea */ .timeline-item:hover .text-point { transform: scale(2.8); /* El texto crece un 280% */ color: #002b6b; }.timeline-item:hover .img-point { transform: scale(2.2); /* La imagen crece (ajustado para que no se pixele excesivamente) */ }.timeline-content { position: absolute; width: 240px; padding: 20px; background: #fff; border: 2px solid #004aad; border-radius: 12px; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); opacity: 0; visibility: hidden; transition: all 0.4s ease; text-align: center; z-index: 10; pointer-events: none; /* Evita que el hover parpadee si el mouse sale del año */ }.timeline-item:hover .timeline-content { opacity: 1; visibility: visible; }/* Tarjetas impares (Aparecen arriba de la línea) */ .timeline-item:nth-child(odd) .timeline-content { bottom: 70px; transform: translateY(20px); } .timeline-item:hover:nth-child(odd) .timeline-content { transform: translateY(0); }/* Tarjetas pares (Aparecen debajo de la línea) */ .timeline-item:nth-child(even) .timeline-content { top: 70px; transform: translateY(-20px); } .timeline-item:hover:nth-child(even) .timeline-content { transform: translateY(0); }/* Tipografía interna de la tarjeta */ .timeline-content h4 { margin: 0 0 8px 0; color: #004aad; font-size: 18px; }.timeline-content p { font-size: 13px; color: #444; line-height: 1.5; margin: 0; }@media (max-width: 768px) { .timeline-container { padding: 40px 20px; } .timeline { flex-direction: column; align-items: flex-start; } /* La línea se vuelve vertical en móviles */ .timeline::before { top: 0; left: 40px; /* Posición izquierda */ transform: none; width: 6px; height: 100%; } .timeline-item { width: 100%; justify-content: flex-start; margin: 40px 0; } /* Centrado de los puntos (imágenes/texto) en la línea vertical */ .timeline-point { position: absolute; left: 43px; transform: translateX(-50%); }/* Fondo blanco para los textos en móvil para tapar la línea vertical de fondo */ .text-point { background: #fafafa; padding: 5px 0; }.timeline-item:hover .text-point { transform: translateX(-50%) scale(1.6); } .timeline-item:hover .img-point { transform: translateX(-50%) scale(1.4); }/* Las tarjetas se acomodan al lado derecho estáticas */ .timeline-content { position: relative; opacity: 1; visibility: visible; width: calc(100% - 90px); margin-left: 90px; transform: none !important; top: auto !important; bottom: auto !important; box-shadow: 0 5px 15px rgba(0,0,0,0.05); } }