/* Optimización de hardware para elementos animados con GSAP */
.exp-title,
.exp-subtitle,
.timeline-line,
.timeline-column,
.timeline-card,
.timeline-dot,
.timeline-dot-inner,
.accordion-item,
.accordion-content {
    will-change: transform, opacity, height;
}

/* Ocultar barra de scroll en track wrapper y el body lateral */
.timeline-track-wrapper {
    mask-image: linear-gradient(to right, transparent, white 80px, white calc(100% - 80px), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, white 80px, white calc(100% - 80px), transparent);
}

/* Estilos de la línea de tiempo */
.timeline-dot {
    transition: box-shadow 0.5s ease, border-color 0.5s ease, transform 0.5s ease;
}

/* Efecto de borde y sombra en hover para las tarjetas */
.timeline-card {
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}

/* Estilo para los botones de navegación de la línea de tiempo */
.nav-arrow {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}

.nav-arrow:hover:not(:disabled) {
    box-shadow: 0 0 15px rgba(155, 89, 182, 0.4);
}

/* Acordeón en móvil */
.accordion-header {
    transition: background-color 0.3s ease;
}

.accordion-header:hover {
    background-color: rgba(155, 89, 182, 0.05);
}

.accordion-item {
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.accordion-item.active {
    border-color: rgba(155, 89, 182, 0.6);
    background-color: rgba(22, 15, 28, 0.6);
}

/* Adaptabilidad */
@media (max-width: 1024px) {
    .timeline-container {
        display: none;
    }
    .accordion-container {
        display: flex;
    }
}

@media (min-width: 1025px) {
    .timeline-container {
        display: block;
    }
    .accordion-container {
        display: none;
    }
}

/* Barra de scroll personalizada y sutil para main */
main::-webkit-scrollbar {
    width: 6px;
}
main::-webkit-scrollbar-track {
    background: transparent;
}
main::-webkit-scrollbar-thumb {
    background: rgba(155, 89, 182, 0.3);
    border-radius: 3px;
}
main::-webkit-scrollbar-thumb:hover {
    background: rgba(155, 89, 182, 0.6);
}
main {
    scrollbar-width: thin;
    scrollbar-color: rgba(155, 89, 182, 0.3) transparent;
}

/* Ajustes de altura para pantallas pequeñas y medianas en desktop */
@media (min-width: 1025px) and (max-height: 850px) {
    main {
        padding-top: 80px !important;
        padding-bottom: 20px !important;
    }
    
    .exp-title-container {
        margin-bottom: 1.5rem !important;
    }
    
    .exp-title {
        font-size: 36px !important;
    }
    
    .timeline-node {
        margin-bottom: 1rem !important;
        height: 30px !important;
    }
    
    .timeline-line {
        top: 14px !important;
    }
    
    .timeline-card {
        padding: 1.5rem !important;
        min-height: 270px !important;
    }
    
    .timeline-card h2 {
        font-size: 1.25rem !important;
    }
    
    .timeline-card h3 {
        margin-bottom: 0.75rem !important;
    }
    
    .timeline-card ul {
        margin-top: 0.75rem !important;
    }
}

@media (min-width: 1025px) and (max-height: 720px) {
    main {
        padding-top: 60px !important;
        padding-bottom: 10px !important;
    }
    
    .exp-title-container {
        margin-bottom: 1rem !important;
    }
    
    .exp-title {
        font-size: 30px !important;
    }
    
    .timeline-node {
        margin-bottom: 0.75rem !important;
        height: 26px !important;
    }
    
    .timeline-line {
        top: 12px !important;
    }
    
    .timeline-card {
        padding: 1.25rem !important;
        min-height: 230px !important;
    }
    
    .timeline-card h2 {
        font-size: 1.15rem !important;
    }
    
    .timeline-card h3 {
        margin-bottom: 0.5rem !important;
    }
    
    .timeline-card ul {
        margin-top: 0.5rem !important;
        gap: 0.5rem !important;
    }
    
    .timeline-card ul li {
        font-size: 11px !important;
    }
}