:root { --bsp-primary-color: var(--bs-primary); --bsp-background-color: #f4f7f9; --bsp-text-color: #333; --bsp-white-color: #ffffff; --bsp-shadow-color: rgba(176,0,0,0.15); --bsp-glow-color: rgba(176,0,0,0.4); } /* * Nuevo contenedor para la sección del timeline. * Usa esta clase para envolver todo el componente. * Contiene los estilos de fondo, fuente y espaciado que antes estaban en . */ .timeline-section-container { font-family: 'Poppins', sans-serif; background-color: var(--bsp-background-color); color: var(--bsp-text-color); padding: 60px 20px; box-sizing: border-box; display: flex; justify-content: center; } /* Contenedor que define el ancho máximo del timeline */ .timeline-wrapper { width: 100%; max-width: 800px; } .timeline-wrapper h1 { text-align: center; color: var(--bsp-primary-color); margin-bottom: 40px; } /* Contenedor principal del timeline */ .bsp-timeline { position: relative; width: 100%; } /* La línea vertical central del timeline */ .bsp-timeline::after { content: ''; position: absolute; left: 25px; top: 0; bottom: 0; width: 4px; background-color: #ddd; border-radius: 2px; z-index: 1; } /* Contenedor para cada paso del timeline (icono + texto) */ .bsp-timeline-item { display: flex; align-items: flex-start; margin-bottom: 40px; position: relative; z-index: 2; } /* Icono numerado */ .bsp-timeline-icon { width: 50px; height: 50px; border-radius: 50%; background-color: var(--bsp-white-color); border: 3px solid #ddd; display: flex; justify-content: center; align-items: center; font-weight: 600; font-size: 1.2rem; color: #aaa; flex-shrink: 0; position: relative; z-index: 3; transition: all 0.3s ease-out; } /* Punto de brillo en la conexión */ .bsp-timeline-icon::before { content: ''; position: absolute; width: 15px; height: 15px; border-radius: 50%; background-color: var(--bsp-glow-color); transform: scale(0); opacity: 0; transition: all 0.3s ease-out; } /* Contenedor del texto */ .bsp-timeline-content { background-color: var(--bsp-white-color); padding: 20px; border-radius: 8px; margin-left: 30px; width: 100%; position: relative; box-shadow: 0 2px 10px rgba(0,0,0,0.05); transition: background-color 0.4s ease-out, transform 0.3s ease-out, box-shadow 0.3s ease-out; } /* Borde inferior animado */ .bsp-timeline-content::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0%; height: 4px; background-color: var(--bsp-primary-color); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; transition: width 0.4s ease-out; } .bsp-timeline-content h3 { margin: 0 0 10px 0; color: var(--bsp-primary-color); } .bsp-timeline-content p { margin: 0; line-height: 1.6; } /* --- ESTADOS :hover --- */ .bsp-timeline-item:hover .bsp-timeline-icon { border-color: var(--bsp-primary-color); background-color: var(--bsp-primary-color); color: var(--bsp-white-color); transform: scale(1.1); box-shadow: 0 0 20px var(--bsp-glow-color); } .bsp-timeline-item:hover .bsp-timeline-icon::before { transform: scale(1); opacity: 1; } .bsp-timeline-item:hover .bsp-timeline-content { background-color: rgba(176,0,0,0.03); transform: translateY(-5px); box-shadow: 0 8px 25px #b0000027; } .bsp-timeline-item:hover .bsp-timeline-content::after { width: 100%; }