.nh-selector {
  --nh-year-size: 36px;
  --nh-item-gap: 18px;
  --nh-track-color: transparent;
  --nh-active-bg: #f3d997;
  --nh-active-color: #1a1a1a;
  --nh-text-color: #1f2225;
  --nh-nav-bg: transparent;
  --nh-nav-border: #7f8f73;
  --nh-visible-items: 5;
 
  margin: 0;
  padding: 8px 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.nh-selector__nav {
  width: 36px;
  height: 36px;
  border-radius: 0;
  border: 0 !important;
  background-color: transparent !important;
  color: transparent !important;
  cursor: pointer;
  line-height: 1;
  display: block;
  transition: opacity 0.2s ease;
  position: relative;
  padding: 0 !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

.nh-selector__nav:hover,
.nh-selector__nav:focus-visible {
  opacity: 0.9;
  outline: none;
  box-shadow: none !important;
}

.nh-selector__viewport {
  position: relative;
  width: 100%;
  height: calc(var(--nh-visible-items) * var(--nh-year-size) + (var(--nh-visible-items) - 1) * var(--nh-item-gap));
  overflow: hidden;
}

.nh-selector__nav span {
  display: none;
}

.nh-selector__nav::before {
  content: none;
}

.nh-selector__nav--up {
  background-image: url("data:image/svg+xml,<svg width=%2736%27 height=%2736%27 viewBox=%270 0 36 36%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27><circle cx=%2717.6955%27 cy=%2717.9393%27 r=%2717.1623%27 transform=%27rotate%28-90 17.6955 17.9393%29%27 stroke=%27%237A7C69%27/><path fill-rule=%27evenodd%27 clip-rule=%27evenodd%27 d=%27M17.2352 14.8817C17.4889 14.628 17.9003 14.628 18.1541 14.8817L23.3523 20.0799C23.606 20.3337 23.606 20.7451 23.3523 20.9988C23.0985 21.2526 22.6871 21.2526 22.4333 20.9988L17.6946 16.2601L12.9559 20.9988C12.7022 21.2526 12.2907 21.2526 12.037 20.9988C11.7832 20.7451 11.7832 20.3336 12.037 20.0799L17.2352 14.8817Z%27 fill=%27%23007940%27 stroke=%27%237A7C69%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/></svg>%0A") !important;
}

.nh-selector__nav--down {
  background-image: url("data:image/svg+xml,<svg width=%2736%27 height=%2736%27 viewBox=%270 0 36 36%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27><circle cx=%2717.6951%27 cy=%2717.9045%27 r=%2717.1623%27 transform=%27rotate%2890 17.6951 17.9045%29%27 stroke=%27%237A7C69%27/><path fill-rule=%27evenodd%27 clip-rule=%27evenodd%27 d=%27M18.1555 20.962C17.9017 21.2158 17.4903 21.2158 17.2365 20.962L12.0384 15.7638C11.7846 15.5101 11.7846 15.0987 12.0384 14.8449C12.2921 14.5912 12.7035 14.5912 12.9573 14.8449L17.696 19.5837L22.4347 14.8449C22.6885 14.5912 23.0999 14.5912 23.3536 14.8449C23.6074 15.0987 23.6074 15.5101 23.3536 15.7639L18.1555 20.962Z%27 fill=%27%23007940%27 stroke=%27%237A7C69%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/></svg>%0A") !important;
}

.nh-selector__viewport::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: var(--nh-track-color);
  z-index: 0;
}

.nh-selector__years {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease;
}

.nh-selector__item {
  display: flex;
  justify-content: center;
  margin-bottom: var(--nh-item-gap);
}

.nh-selector__item:last-child {
  margin-bottom: 0;
}

.nh-selector__year {
  width: var(--nh-year-size);
  height: var(--nh-year-size);
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent !important;
  color: var(--nh-text-color) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: 0;
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: inherit !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
}

.nh-selector__year:hover,
.nh-selector__year:focus-visible {
  color: #111;
  outline: none;
}

.nh-selector__year.is-active {
  background: var(--nh-active-bg) !important;
  color: var(--nh-active-color) !important;
  border-color: transparent;
  box-shadow: none;
}

.nh-imagen-destacada {
  width: 100%;
  height: 620px;
  border-radius: 0 0 14px 14px !important;
  overflow: hidden;
}

.nh-imagen-destacada__img {
  width: 100%;
  height: 620px !important;
  min-height: 620px;
  max-height: 620px;
  display: block;
  border-radius: 0 0 14px 14px !important;
  object-fit: cover;
  object-position: center center;
}

.nh-imagen-destacada img,
.nh-imagen-destacada .nh-imagen-destacada__img {
  border-radius: 0 0 14px 14px !important;
}

.nh-thumbs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}

.nh-thumbs__item {
  position: relative;
  width: 120px;
  height: 100px;
  border-radius: 8px;
  overflow: hidden;
  transition: opacity 0.3s ease, filter 0.3s ease;
  filter: grayscale(100%);
  opacity: 0.7;
  cursor: pointer;
}

.nh-thumbs__item--current {
  filter: grayscale(0%);
  opacity: 1;
}

.nh-thumbs__item--hidden {
  visibility: hidden;
  pointer-events: none;
}

.nh-thumbs__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: center center;
  display: block;
}

@media (max-width: 767px) {
  .nh-thumbs {
    gap: 10px;
    margin-top: 14px;
  }

  .nh-thumbs__item {
    width: 90px;
    height: 60px;
  }
}

.nh-animate-exit {
  animation: nhExit 0.3s ease forwards;
}

.nh-animate-enter {
  animation: nhEnter 0.3s ease forwards;
}

@keyframes nhExit {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(12px);
  }
}

@keyframes nhEnter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 767px) {
  .nh-selector {
    --nh-item-gap: 12px;
    --nh-visible-items: 4;
    padding: 6px 0;
  }

  .nh-selector__nav {
    width: 36px;
    height: 36px;
  }

  .nh-selector__year {
    font-size: 16px !important;
  }

  .nh-imagen-destacada {
    height: 280px;
  }

  .nh-imagen-destacada__img {
    height: 280px !important;
    min-height: 280px;
    max-height: 280px;
  }
}