/* --- ESTILOS GENERALES (Sin cambios) --- */
.servicios-section {
    padding: 100px 0;
    background-color: #ffffff;
    overflow: hidden;
    position: relative;
}
#timeline-svg {
    width: 100%;
    height: auto;
}
.timeline-point .year {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;
    font-size: 18px;
    fill: #333333;
}

/* ==========================================================================
   LÓGICA DE LA ANIMACIÓN (VERSIÓN DEFINITIVA Y SIMPLIFICADA)
   ========================================================================== */

/* 1. ESTADO INICIAL DE LA LÍNEA (ANTES DE LA ANIMACIÓN) */
#timeline-path {
    /* El JS nos da el valor de --path-length.
       La línea empieza "enrollada" o "sin dibujar". */
    stroke-dasharray: var(--path-length);
    stroke-dashoffset: var(--path-length);
    /* Esta es la transición que se ejecutará */
    transition: stroke-dashoffset 4s ease-out;
}

/* 2. ESTADO INICIAL DE LOS PUNTOS (ANTES DE LA ANIMACIÓN) */
.timeline-point {
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* 3. ESTADO FINAL (CUANDO EL JS AÑADE LA CLASE '.start-animation') */

/* La línea se "dibuja" */
#timeline-svg.start-animation #timeline-path {
    stroke-dashoffset: 0;
}

/* Los puntos aparecen */
#timeline-svg.start-animation .timeline-point {
    opacity: 1;
    transform: none; /* Vuelven a su posición original */
}

/* 4. EFECTO ESCALONADO PARA LA APARICIÓN DE LOS PUNTOS */
#timeline-svg.start-animation .timeline-point:nth-child(1) { transition-delay: 0.5s; }
#timeline-svg.start-animation .timeline-point:nth-child(2) { transition-delay: 0.8s; }
#timeline-svg.start-animation .timeline-point:nth-child(3) { transition-delay: 1.1s; }
#timeline-svg.start-animation .timeline-point:nth-child(4) { transition-delay: 1.4s; }
#timeline-svg.start-animation .timeline-point:nth-child(5) { transition-delay: 1.7s; }
#timeline-svg.start-animation .timeline-point:nth-child(6) { transition-delay: 2.0s; }
#timeline-svg.start-animation .timeline-point:nth-child(7) { transition-delay: 2.3s; }
#timeline-svg.start-animation .timeline-point:nth-child(8) { transition-delay: 2.6s; }
#timeline-svg.start-animation .timeline-point:nth-child(9) { transition-delay: 2.9s; }

/* ==========================================================================
   ESTADOS INICIALES RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    .timeline-point .year { font-size: 28px; }
    /* Estado inicial en móvil: desplazado a la izquierda */
    .timeline-point { transform: translateX(-80px); }
	
	 /* --- NUEVA REGLA AÑADIDA --- */
    /* Permite que el SVG (que ahora es más alto) se muestre completamente sin ser cortado por su contenedor. */
    .servicios-section {
        overflow: visible;
    }
	
	
}

@media (min-width: 769px) {
    /* Estado inicial en escritorio: desplazado hacia abajo */
    .timeline-point { transform: translateY(40px); }
}

/* El bloque de estilos del botón de animación móvil ha sido eliminado. */