.results { overflow: hidden; }
.results__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: clamp(32px, 4vw, 52px); }
.results__head p { max-width: 380px; color: var(--topo-oscuro); }
.results__nav { display: flex; gap: 8px; flex: none; }
.results__nav button {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--linea); background: var(--blanco);
  transition: background .25s, color .25s, opacity .25s, transform 120ms var(--ease);
}
.results__nav button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.results__nav button:disabled { opacity: .35; cursor: default; }
@media (hover: hover) and (pointer: fine) { .results__nav button:not(:disabled):hover { background: var(--ebano); color: var(--alabastro); } }
.results__nav button:active:not(:disabled) { transform: scale(.95); }

.reels {
  --card: clamp(220px, 22vw, 290px);
  list-style: none; margin: 0; padding: 4px max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))) 24px;
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--card); gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  overscroll-behavior-x: contain; scrollbar-width: none;
}
.reels::-webkit-scrollbar { display: none; }
.reel { scroll-snap-align: start; }
.reel__btn {
  position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; overflow: hidden;
  border-radius: 22px; background: #2a2826; color: var(--alabastro); text-align: left;
  isolation: isolate; transition: transform 300ms var(--ease);
}
.reel__btn video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 600ms var(--ease); }
.reel__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(20,19,18,.82) 0%, rgba(20,19,18,.15) 42%, rgba(20,19,18,0) 60%, rgba(20,19,18,.3) 100%); }
.reel__tag {
  position: absolute; top: 14px; left: 14px; padding: 6px 12px; border-radius: 100px;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.reel__play {
  position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: var(--alabastro); color: var(--ebano);
  transition: transform 300ms var(--ease);
}
.reel__play svg { width: 16px; height: 16px; fill: currentColor; margin-left: 2px; }
.reel__title { position: absolute; left: 18px; right: 18px; bottom: 18px; font-family: var(--f-display); font-size: 19px; line-height: 1.25; text-transform: uppercase; }
@media (hover: hover) and (pointer: fine) {
  .reel__btn:hover video { transform: scale(1.04); }
  .reel__btn:hover .reel__play { transform: scale(1.12); }
}
.reel__btn:active { transform: scale(.98); transition-duration: 120ms; }
.reel__btn:focus-visible { outline-color: var(--ebano); }

.viewer {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  background: rgba(20,19,18,.92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; transition: opacity 250ms var(--ease);
}
.viewer[hidden] { display: none; }
.viewer.is-open { opacity: 1; }
.viewer__stage { display: grid; place-items: center; width: 100%; height: 100%; padding: 70px 16px 90px; }
.viewer__frame {
  position: relative; height: min(calc(100svh - 170px), 860px); aspect-ratio: 9 / 16; max-width: 100%;
  border-radius: 24px; overflow: hidden; background: #000;
  transform: scale(.96); transition: transform 300ms var(--ease);
}
.viewer.is-open .viewer__frame { transform: none; }
.viewer__video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.viewer__caption { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); width: min(560px, calc(100% - 140px)); text-align: center; color: var(--alabastro); font-family: var(--f-display); font-size: 18px; text-transform: uppercase; }
.viewer__caption small { display: block; font-family: var(--f-text); font-size: 11px; letter-spacing: .2em; color: var(--topo); margin-bottom: 4px; }
.viewer__close, .viewer__arrow {
  position: absolute; width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center; color: var(--alabastro);
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  transition: background .25s, transform 120ms var(--ease);
}
.viewer__close svg, .viewer__arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.viewer__close { top: 16px; right: 16px; }
.viewer__arrow--prev { left: 16px; bottom: 16px; }
.viewer__arrow--next { right: 16px; bottom: 16px; }
@media (hover: hover) and (pointer: fine) { .viewer__close:hover, .viewer__arrow:hover { background: rgba(255,255,255,.22); } }
.viewer__close:active, .viewer__arrow:active { transform: scale(.94); }
.viewer :focus-visible { outline-color: var(--alabastro); }

@media (max-width: 600px) {
  .results__head { flex-direction: column; align-items: flex-start; }
  .results__nav { display: none; }
  .reels { --card: 62vw; }
  .viewer__stage { padding: 0; }
  .viewer__frame { height: 100svh; border-radius: 0; aspect-ratio: auto; width: 100%; }
  .viewer__caption { display: none; }
  .viewer__arrow--prev { top: 16px; bottom: auto; }
  .viewer__arrow--next { top: 16px; bottom: auto; right: auto; left: 76px; }
}

.results__nav--head { margin-top: 18px; }