/* 1. Limpieza y Contenedor */
.experience-wrapper { padding: 60px 0; max-width: 1200px; margin: 0 auto; will-change: transform; }

/* 2. Sección de año */
.year-section {
    display: flex; flex-direction: row; align-items: flex-start; gap: 40px; margin-bottom: 120px;
}
.year-section:nth-child(even) { flex-direction: row-reverse; }

.year-marker { flex: 0 0 120px; position: sticky; top: 100px; }

.circle-badge {
    width: 120px; height: 120px; border: 2px solid #ffffff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.2rem; color: #ffffff;
}

/* 3. Mosaico (Grid) */
.clapat-portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 250px;
    gap: 15px;
    flex-grow: 1;
}

.grid-item { overflow: hidden; border-radius: 8px; cursor: pointer; }

/* Efecto ladrillo: la primera imagen de cada grupo es más alta */
.grid-item:nth-child(3n+1) { grid-row: span 2; }

/* 4. Imágenes (Nitidez total) */
.grid-item img {
    width: 100%; height: 100%; object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    backface-visibility: hidden; /* Evita borrosidad */
}

.grid-item:hover img { transform: scale(1.05); }

/* 5. Animación GSAP (Sin filtros de blur, para máxima nitidez) */
.grid-item.has-animation {
    opacity: 0;
    transform: translateY(50px) scale(0.9);
}

/* Responsividad */
@media (max-width: 768px) {
    .year-section { flex-direction: column; gap: 20px; }
    .clapat-portfolio-grid { grid-template-columns: 1fr; }
    .circle-badge { width: 80px; height: 80px; }
}