.hg-trabajos {
  --hg-trabajo-line: #d8d8d8;
  --hg-trabajo-text: #171717;
  --hg-trabajo-muted: #b6b6b6;
  --hg-trabajo-button: #4757f4;
  --hg-trabajo-button-text: #ffffff;
  --hg-trabajo-media-bg: #f1f1f1;
  --hg-trabajo-preview-size: clamp(280px, 27.62vw, 464px);
  --hg-trabajo-preview-padding: clamp(22px, 1.9vw, 32px);
  --hg-trabajo-row-height: clamp(150px, 14.05vw, 236px);
  --hg-trabajo-row-padding: clamp(24px, 8.1vw, 136px);
  --hg-trabajo-image-duration: 620ms;
  --hg-trabajo-text-shift: clamp(14px, 1.35vw, 24px);

  position: relative;
  width: 100%;
  overflow: visible;
  isolation: isolate;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.hg-trabajos *,
.hg-trabajos *::before,
.hg-trabajos *::after {
  box-sizing: border-box;
}

/* =========================
   Escritorio: lista con hover
   ========================= */
.hg-trabajos__desktop {
  display: block;
}

.hg-trabajos__list {
  position: relative;
  z-index: 1;
  border-bottom: 1px solid var(--hg-trabajo-line);
}

.hg-trabajos__item {
  margin: 0;
  border-top: 1px solid var(--hg-trabajo-line);
}

.hg-trabajos__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, auto);
  align-items: center;
  gap: clamp(30px, 6vw, 100px);
  min-height: var(--hg-trabajo-row-height);
  padding-inline: var(--hg-trabajo-row-padding);
  color: var(--hg-trabajo-text);
  transition: color 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hg-trabajos__title {
  min-width: 0;
  font-size: clamp(48px, 5.24vw, 88px);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.055em;
  transform: translate3d(0, 0, 0);
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.hg-trabajos__service {
  justify-self: end;
  max-width: 300px;
  font-size: clamp(13px, 1.07vw, 18px);
  font-weight: 450;
  line-height: 1.35;
  text-align: right;
  letter-spacing: -0.025em;
  transform: translate3d(0, 0, 0);
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* Solo el trabajo activo pasa a gris y abre su contenido hacia los lados. */
.hg-trabajos.is-active .hg-trabajos__row.is-active {
  color: var(--hg-trabajo-muted);
}

.hg-trabajos.is-active .hg-trabajos__row.is-active .hg-trabajos__title {
  transform: translate3d(calc(0px - var(--hg-trabajo-text-shift)), 0, 0);
}

.hg-trabajos.is-active .hg-trabajos__row.is-active .hg-trabajos__service {
  transform: translate3d(var(--hg-trabajo-text-shift), 0, 0);
}

.hg-trabajos__preview {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  width: var(--hg-trabajo-preview-size);
  aspect-ratio: 1 / 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(-9999px, -9999px, 0) translate(-50%, -50%) scale(0.96);
  transition:
    opacity 220ms ease,
    visibility 220ms ease,
    scale 450ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

.hg-trabajos__preview.is-visible {
  opacity: 1;
  visibility: visible;
}

.hg-trabajos__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--hg-trabajo-media-bg);
}

.hg-trabajos__slide {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: var(--hg-trabajo-preview-padding);
  background: var(--hg-trabajo-media-bg);
  transform: translate3d(0, 100%, 0);
  will-change: transform;
}

.hg-trabajos__slide.is-front {
  z-index: 2;
  transform: translate3d(0, 0, 0);
}

.hg-trabajos__slide.is-animating {
  transition: transform var(--hg-trabajo-image-duration) cubic-bezier(0.76, 0, 0.24, 1);
}

.hg-trabajos__preview-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
}

.hg-trabajos__view {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(66px, 5.6vw, 94px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--hg-trabajo-button);
  color: var(--hg-trabajo-button-text) !important;
  font-size: clamp(12px, 0.95vw, 16px);
  font-weight: 500;
  line-height: 1;
  text-decoration: none !important;
  transform: translate3d(-50%, -50%, 0);
  pointer-events: auto;
  cursor: pointer;
  will-change: transform;
}

.hg-trabajos__view::before {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: inherit;
}

.hg-trabajos__view span {
  pointer-events: none;
}

.hg-trabajos__view:hover,
.hg-trabajos__view:focus,
.hg-trabajos__view:focus-visible {
  color: var(--hg-trabajo-button-text) !important;
  text-decoration: none !important;
}

.hg-trabajos__view:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -6px;
}

/* =========================
   Tablet y móvil: cards
   ========================= */
.hg-trabajos__grid {
  display: none;
}

.hg-trabajos__card {
  min-width: 0;
  margin: 0;
}

.hg-trabajos__card-link {
  display: block;
  color: var(--hg-trabajo-text) !important;
  text-decoration: none !important;
}

.hg-trabajos__card-link:hover,
.hg-trabajos__card-link:focus,
.hg-trabajos__card-link:focus-visible {
  color: var(--hg-trabajo-text) !important;
  text-decoration: none !important;
}

.hg-trabajos__card-media {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  padding-inline: clamp(24px, 5vw, 48px);
  background: var(--hg-trabajo-media-bg);
}

.hg-trabajos__card-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  user-select: none;
  -webkit-user-drag: none;
}

.hg-trabajos__card-link:hover .hg-trabajos__card-image,
.hg-trabajos__card-link:focus-visible .hg-trabajos__card-image {
  transform: scale(1.025);
}

.hg-trabajos__card-title {
  margin: clamp(25px, 3.15vw, 34px) 0 0;
  padding: 0 0 clamp(18px, 2.2vw, 23px);
  border-bottom: 1px solid var(--hg-trabajo-line);
  color: inherit;
  font-family: inherit;
  font-size: clamp(28px, 3.15vw, 34px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.hg-trabajos__card-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 20px;
  padding-top: clamp(17px, 2vw, 21px);
  font-size: clamp(14px, 1.52vw, 16px);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.025em;
}

.hg-trabajos__card-service {
  min-width: 0;
}

.hg-trabajos__card-year {
  white-space: nowrap;
  text-align: right;
}

.hg-trabajos-empty {
  margin: 0;
}

/* Tablet: máximo 4 trabajos, 2 columnas. */
@media (min-width: 768px) and (max-width: 1024px) {
  .hg-trabajos__desktop {
    display: none;
  }

  .hg-trabajos__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: none;
    margin: 0;
    padding-inline: 0;
    column-gap: clamp(22px, 3vw, 30px);
    row-gap: clamp(66px, 8vw, 86px);
  }

  .hg-trabajos__card-media {
    padding-inline: clamp(28px, 4.5vw, 44px);
  }

  .hg-trabajos__card:nth-child(n + 5) {
    display: none;
  }
}

/* Móvil: máximo 3 trabajos, 1 columna. */
@media (max-width: 767px) {
  .hg-trabajos__desktop {
    display: none;
  }

  .hg-trabajos__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: none;
    margin: 0;
    padding-inline: 0;
    row-gap: clamp(78px, 20vw, 112px);
  }

  .hg-trabajos__card-media {
    padding-inline: clamp(26px, 8vw, 38px);
  }

  .hg-trabajos__card:nth-child(n + 4) {
    display: none;
  }

  .hg-trabajos__card-title {
    margin-top: clamp(25px, 7vw, 32px);
    padding-bottom: clamp(18px, 5vw, 23px);
    font-size: clamp(29px, 8.2vw, 34px);
  }

  .hg-trabajos__card-meta {
    gap: 16px;
    padding-top: clamp(18px, 5vw, 22px);
    font-size: clamp(14px, 4vw, 16px);
  }
}

/* Fallback para dispositivos táctiles grandes. */
@media (min-width: 1025px) and (hover: none),
       (min-width: 1025px) and (pointer: coarse) {
  .hg-trabajos__desktop {
    display: none;
  }

  .hg-trabajos__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: none;
    margin: 0;
    padding-inline: 0;
    gap: 76px 30px;
  }

  .hg-trabajos__card:nth-child(n + 5) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hg-trabajos__row,
  .hg-trabajos__title,
  .hg-trabajos__service,
  .hg-trabajos__preview,
  .hg-trabajos__slide,
  .hg-trabajos__card-image {
    transition: none !important;
  }
}