.experiencias { padding: 5rem max(1.25rem, calc((100vw - 1180px) / 2)); background: linear-gradient(160deg, #0f2f52 0%, var(--blue-950) 55%, #081b30 100%); color: var(--white); position: relative; overflow: clip; }
.experiencias__intro { max-width: 920px; margin-bottom: 3rem; }
.experiencias__list { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }

.experience {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: clip;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.55);
  transition: background-color 260ms ease, border-color 260ms ease, transform 260ms ease;
}
.experience__media { overflow: clip; }
.experience img {
  display: block; width: 100%; height: clamp(210px, 40vw, 300px); object-fit: cover;
  filter: saturate(.96) brightness(.95);
  transform: scale(1);
  animation: experience-drift 24s ease-in-out infinite alternate;
}
.experience:nth-child(2n) img { animation-delay: -8s; }
.experience:nth-child(3n) img { animation-delay: -16s; }
.experience__copy { padding: clamp(1.35rem, 4vw, 2rem); }
.experience__place { margin: 0 0 .75rem; color: #ff9a5c; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.experience h3 { max-width: 24ch; margin: 0 0 .85rem; font-size: clamp(1.4rem, 2.4vw, 1.85rem); line-height: 1.14; }
.experience__copy > p:last-child { max-width: 55ch; margin: 0; line-height: 1.7; color: rgba(255,255,255,.86); }
.experience.is-active { background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.3); }
.experience.is-active img { filter: saturate(1.05) brightness(1.02); }
.experiencias__credit { margin: 2rem 0 0; color: rgba(255,255,255,.6); font-size: .72rem; }

@keyframes experience-drift {
  from { transform: scale(1) translate3d(0,0,0); }
  to { transform: scale(1.07) translate3d(-1.2%, -0.8%, 0); }
}

@media (min-width: 700px) {
  .experiencias__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; }
}

@media (min-width: 1100px) {
  .experiencias { padding-block: 7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .experience, .experience img { transition: none; animation: none; }
}