.work-page .section-opening-heading {
  margin-bottom: 0;
}
.work-page .section-opening {
  padding-bottom: 24px;
}
.work-page .work-folder-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 72px 112px;
  max-width: 800px;
  width: 84%;
  margin: 28px auto 40px;
  align-items: start;
}
.work-folder {
  min-width: 0;
}
.work-folder > summary {
  display: block;
  position: relative;
  aspect-ratio: 1.2;
  cursor: pointer;
  list-style: none;
  isolation: isolate;
  filter: drop-shadow(0 12px 12px rgb(31 40 52/14%));
}
.work-folder > summary::-webkit-details-marker {
  display: none;
}
.work-folder > summary:focus-visible {
  outline: 2px solid #30333c;
  outline-offset: 8px;
  border-radius: 24px;
}
.folder-back {
  position: absolute;
  inset: 10% 8% 5%;
  border: 1px solid rgb(255 255 255/85%);
  border-radius: 26px;
  background: rgb(188 200 214/35%);
}
.folder-previews {
  position: absolute;
  inset: 0 3% 8%;
}
.folder-preview {
  position: absolute;
  top: 5%;
  left: 27%;
  width: 46%;
  height: 83%;
  object-fit: cover;
  border: 7px solid #fff;
  border-radius: 20px;
  box-shadow: 0 8px 18px rgb(26 34 44/14%);
  transform-origin: 50% 90%;
  transition: transform 0.35s;
}
.folder-preview.preview-0 {
  transform: translateX(-48%) rotate(-18deg);
}
.folder-preview.preview-1 {
  z-index: 1;
  top: 0;
}
.folder-preview.preview-2 {
  transform: translateX(48%) rotate(18deg);
}
.folder-front {
  position: absolute;
  inset: 43%0 0;
  z-index: 2;
  border-radius: 26px;
  clip-path: url(#work-folder-tab);
  background: linear-gradient(
    145deg,
    rgb(238 242 248/55%),
    rgb(214 223 234/38%) 45%,
    rgb(255 255 255/88%)
  );
  border: 1px solid rgb(255 255 255/95%);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(15px) saturate(85%);
  -webkit-backdrop-filter: blur(15px) saturate(85%);
}
.folder-front::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass-reflection);
  pointer-events: none;
}
.folder-front::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url(/assets/images/background/vidrio-esmerilado.jpg) center/cover;
  opacity: 0.1;
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.folder-title {
  position: absolute;
  left: 7%;
  top: 11%;
  color: #262b32;
  font-size: clamp(17px, 1.9vw, 25px);
  letter-spacing: -0.04em;
}
.work-folder > summary:hover .preview-0 {
  transform: translateX(-52%) rotate(-21deg);
}
.work-folder > summary:hover .preview-2 {
  transform: translateX(52%) rotate(21deg);
}
.folder-contents {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 24px 8px 12px;
}
.folder-contents button {
  padding: 8px;
  border: 1px solid #ffffffd9;
  border-radius: 18px;
  background: var(--glass-surface);
  box-shadow: var(--glass-shadow);
  color: #20242a;
  cursor: pointer;
  text-align: left;
}
.folder-contents img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.folder-contents button > span {
  display: block;
  padding: 10px 2px 4px;
  font-size: 14px;
}
@media (max-width: 599px) {
  .work-page .section-opening {
    padding-bottom: 64px;
  }
  .work-page .work-folder-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 22px;
    max-width: none;
    width: 100%;
    margin-top: 40px;
  }
  .folder-preview {
    border-width: 3px;
    border-radius: 8px;
  }
  .folder-title {
    font-size: clamp(10px, 2.8vw, 16px);
    top: 12%;
    left: 6%;
    letter-spacing: -0.045em;
  }
  .folder-front,
  .folder-back {
    border-radius: 12px;
  }
  .folder-contents {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px 0 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .folder-preview {
    transition: none;
  }
}
html[data-motion='paused'] .folder-preview {
  transition: none;
}
.work-folder-defs {
  position: absolute;
  pointer-events: none;
}
dialog.folder-slider {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}
.folder-slider::backdrop {
  background: rgb(27 36 48/22%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.folder-slider-track {
  position: absolute;
  inset: 0;
  touch-action: none;
  overflow: hidden;
  overscroll-behavior: contain;
  outline: none;
}
.folder-slider .slider-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 20;
  width: 38px;
  height: 38px;
  border: 1px solid rgb(255 255 255/80%);
  border-radius: 50%;
  background: rgb(255 255 255/30%);
  color: #171b20;
  font-size: 28px;
  cursor: pointer;
}
.folder-slider-card {
  position: absolute;
  left: 50%;
  top: 50%;
  padding: 7px;
  aspect-ratio: auto;
  border: 1px solid rgb(255 255 255/95%);
  border-radius: 22px;
  background: var(--glass-surface);
  box-shadow: var(--glass-shadow);
  cursor: grab;
  overflow: visible;
  user-select: none;
  -webkit-user-select: none;
}
.folder-slider-card[hidden] {
  display: none;
}
.folder-slider-card img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 15px;
  pointer-events: none;
}
.folder-slider-card:focus-visible {
  outline: 2px solid #171b20;
  outline-offset: 5px;
}
.folder-process-toggle {
  position: absolute;
  z-index: 4;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 78px;
  min-height: 36px;
  padding: 9px 18px;
  border: 1px solid rgb(255 255 255 / 95%);
  border-radius: 999px;
  background: rgb(255 255 255 / 90%);
  box-shadow: 0 4px 12px rgb(22 30 43 / 16%);
  color: #111;
  font:
    600 11px Outfit,
    sans-serif;
  letter-spacing: 0.08em;
  cursor: pointer;
  touch-action: manipulation;
}
.folder-process-toggle:disabled {
  opacity: 0.65;
  cursor: default;
}
.folder-process-toggle:focus-visible {
  outline: 2px solid #111;
  outline-offset: 3px;
}
.folder-slider-card .folder-process-video {
  position: absolute;
  inset: 7px;
  width: calc(100% - 14px);
  height: calc(100% - 14px);
  border-radius: 15px;
  object-fit: contain;
  background: #111;
  pointer-events: none;
}
/* Keep the poster in layout while its video overlays it, so STOP never changes the frame. */
.folder-slider-card img[hidden] {
  display: block !important;
  visibility: hidden;
}
.folder-slider-card video[hidden] {
  display: none !important;
}
.folder-process-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
}
@media (max-width: 599px) {
  .folder-process-toggle {
    top: calc(100% + 14px);
    min-height: 40px;
  }
  .folder-slider-card .folder-process-video {
    inset: 3px;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    border-radius: 7px;
  }
}
@media (max-width: 599px) {
  .folder-slider-card {
    padding: 3px;
    border-radius: 11px;
  }
  .folder-slider-card img {
    border-radius: 7px;
  }
}
.folder-slider-card:not([hidden]) {
  will-change: transform, opacity;
  backface-visibility: hidden;
}
html.folder-slider-open body::before,
html.folder-slider-open body::after,
html.folder-slider-open .site-shell * {
  animation-play-state: paused !important;
}
@media (max-width: 599px) {
  .folder-slider::backdrop {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .folder-slider-card {
    box-shadow:
      inset 0 1px 1px #fff,
      0 10px 24px rgb(33 36 47/20%);
  }
}

/* Only the media layers blur; their clipping keeps the frame and control sharp. */
.folder-slider-card.is-media-transitioning img,
.folder-slider-card.is-media-transitioning .folder-process-video {
  clip-path: inset(0 round 15px);
}
@media (max-width: 599px) {
  .folder-slider-card.is-media-transitioning img,
  .folder-slider-card.is-media-transitioning .folder-process-video {
    clip-path: inset(0 round 7px);
  }
}

.folder-placeholder {
  background: linear-gradient(145deg, #eef3f8, #cdd9e5);
}
.folder-pending {
  position: absolute;
  left: 6%;
  top: 48%;
  font-size: 11px;
  color: #596577;
}
.work-folder > summary[aria-disabled='true'] {
  cursor: default;
}
@media (max-width: 599px) {
  .folder-pending {
    font-size: 8px;
  }
}