#trabajos.projects-gallery {
  padding: clamp(76px, 8vw, 118px) 0 clamp(72px, 7vw, 100px);
  overflow: hidden;
  background: var(--paper, #f2f3f4);
  color: var(--ink, #111721);
}

.projects-gallery__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
}

.projects-gallery__accent { color: var(--blue-deep, #1c55ae); }
.projects-gallery__intro { max-width: 340px; font-size: 13px; line-height: 1.8; color: #5a6673; }

.projects-gallery__track {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 24px;
  margin-top: 48px;
  padding: 12px 0 24px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: none;
  scroll-behavior: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: #7e9bc8 #dce2ea;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}

.projects-gallery__track::-webkit-scrollbar { height: 6px; }
.projects-gallery__track::-webkit-scrollbar-track { background: #dce2ea; border-radius: 99px; }
.projects-gallery__track::-webkit-scrollbar-thumb { background: #7e9bc8; border-radius: 99px; }
.projects-gallery__track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.projects-gallery__track.is-dragging * { cursor: grabbing; }

.projects-gallery__card {
  position: relative;
  flex: 0 0 calc((100% - 48px) / 3);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 0 0 3px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: inherit;
  text-align: left;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  -webkit-user-drag: none;
  transition: transform 280ms var(--ease, ease), color 220ms ease;
}

.projects-gallery__visual {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 16px;
  background: #dce2e6;
  isolation: isolate;
  transition: box-shadow 280ms ease;
}

.projects-gallery__visual::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid #12274514;
  border-radius: inherit;
  pointer-events: none;
}

.projects-gallery__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.06) contrast(1.025) brightness(1.01);
  -webkit-user-drag: none;
  transition: transform 500ms var(--ease, ease);
}

.projects-gallery__card[data-kind="diagram"] .projects-gallery__visual { background: #e7edf5; }
.projects-gallery__card[data-kind="diagram"] img { object-fit: contain; padding: 12px; filter: none; }
.projects-gallery__badge { position: absolute; left: 14px; bottom: 14px; padding: 7px 11px; border-radius: 99px; background: #f7faffed; color: #183d70; font-size: 10px; line-height: 1.3; font-weight: 700; }
.projects-gallery__card:active { transform: translateY(2px) scale(.985); }
.projects-gallery__card:focus-visible { outline: 3px solid #2c72e2; outline-offset: 5px; }

.projects-gallery__controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.projects-gallery__controls button,
.projects-lightbox button {
  min-height: 44px;
  padding: 11px 19px;
  border: 1px solid #aab7c8;
  border-radius: 99px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  transition: transform 180ms var(--ease, ease), background-color 180ms ease, border-color 180ms ease;
}

.projects-gallery__controls [data-gallery-pause] { margin-left: auto; background: #e2eaf5; border-color: transparent; }
.projects-gallery__controls button:disabled,
.projects-lightbox button:disabled { opacity: .42; cursor: default; transform: none; }
.projects-gallery__controls button:active:not(:disabled),
.projects-lightbox button:active:not(:disabled) { transform: translateY(1px) scale(.95); }
.projects-gallery__hint { margin-top: 18px; color: #5a6673; font-size: 11px; line-height: 1.7; }
.projects-gallery__status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.projects-gallery [hidden], .projects-lightbox [hidden] { display: none !important; }

.projects-lightbox {
  width: min(1280px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 24px;
  border: 1px solid #ffffff24;
  border-radius: 24px;
  background: #101925;
  color: #f1f5fa;
  overflow: hidden;
  box-shadow: 0 30px 100px #0007;
}

.projects-lightbox::backdrop { background: #07101be8; backdrop-filter: blur(8px); }
.projects-lightbox__layout { display: flex; flex-direction: column; gap: 18px; max-height: calc(100dvh - 82px); }
.projects-lightbox[open] .projects-lightbox__layout { animation: projects-lightbox-enter 230ms var(--ease, ease); }
.projects-lightbox__toolbar { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; flex-shrink: 0; }
.projects-lightbox button { border-color: #ffffff40; }
.projects-lightbox [data-lightbox-close] { background: #e9f1ff; color: #102745; border-color: transparent; }
.projects-lightbox__viewport { min-height: 0; height: min(70dvh, 780px); flex: 1 1 auto; overflow: auto; overscroll-behavior: contain; display: grid; place-items: center; background: #080f18; border-radius: 12px; scrollbar-width: thin; }
.projects-lightbox__image { display: block; width: auto; height: auto; max-width: 100%; max-height: min(70dvh, 780px); object-fit: contain; margin: auto; filter: saturate(1.06) contrast(1.025) brightness(1.01); }
.projects-lightbox[data-kind="diagram"] .projects-lightbox__viewport { background: #e7edf5; }
.projects-lightbox[data-kind="diagram"] .projects-lightbox__image { filter: none; }
.projects-lightbox.is-zoomed .projects-lightbox__viewport { display: block; }
.projects-lightbox.is-zoomed .projects-lightbox__image { width: auto; height: auto; max-width: none; max-height: none; }
.projects-lightbox__footer { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; flex-shrink: 0; }
.projects-lightbox__details { min-width: 0; text-align: center; }
.projects-lightbox__caption { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.projects-lightbox__reference { display: none; font-size: 13px; line-height: 1.6; }
.projects-lightbox[data-kind="diagram"] .projects-lightbox__reference { display: inline; }
.projects-lightbox [data-lightbox-status] { font-size: 12px; line-height: 1.6; text-align: center; }
.projects-lightbox button:focus-visible, .projects-lightbox__viewport:focus-visible { outline: 3px solid #8fb6f4; outline-offset: 4px; }

@keyframes projects-lightbox-enter {
  from { opacity: .3; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (hover: hover) and (pointer: fine) {
  .projects-gallery__card:hover { transform: translateY(-6px); color: var(--blue-deep, #1c55ae); }
  .projects-gallery__card:hover .projects-gallery__visual { box-shadow: 0 15px 28px #0d28451a; }
  .projects-gallery__card:hover img { transform: scale(1.035); }
  .projects-gallery__card[data-kind="diagram"]:hover img { transform: none; }
  .projects-gallery__controls button:hover:not(:disabled) { transform: translateY(-2px); background: #dae6f7; border-color: #85a6d7; }
  .projects-lightbox button:hover:not(:disabled) { transform: translateY(-2px); background: #ffffff1c; }
  .projects-lightbox [data-lightbox-close]:hover { background: #cbdfff; }
}

.paused .projects-gallery__card, .paused .projects-gallery__visual img,
.paused .projects-gallery__controls button, .paused .projects-lightbox button { transition: none; transform: none; }
.paused .projects-lightbox[open] .projects-lightbox__layout { animation: none; }

@media (max-width: 1000px) {
  .projects-gallery__card { flex-basis: calc((100% - 24px) / 2); }
}

@media (max-width: 600px) {
  .projects-gallery__header { display: block; }
  .projects-gallery__intro { margin-top: 22px; }
  .projects-gallery__track { gap: 16px; margin-top: 28px; }
  .projects-gallery__card { flex-basis: 85%; gap: 15px; }
  .projects-gallery__controls { gap: 8px; }
  .projects-gallery__controls button { padding: 10px 15px; font-size: 11px; }
  .projects-gallery__controls [data-gallery-pause] { margin-left: 0; }
  .projects-lightbox { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); padding: 14px; border-radius: 18px; }
  .projects-lightbox__layout { max-height: calc(100dvh - 46px); gap: 14px; }
  .projects-lightbox__viewport { height: 62dvh; }
  .projects-lightbox__image { max-height: 62dvh; }
  .projects-lightbox__footer { gap: 10px; }
  .projects-lightbox button { min-height: 44px; padding: 10px 13px; font-size: 11px; }
  .projects-lightbox__reference { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .projects-gallery__card, .projects-gallery__visual img, .projects-gallery__controls button,
  .projects-lightbox button, .projects-lightbox__layout { animation: none !important; transition: none !important; transform: none !important; }
}