/* Carrossel: um item grande no centro e os vizinhos pela metade nas pontas.
   Usa as cores da página (--accent, --line, --card-hover, --muted).
   Variações: .cf-wide (prints largos, sem cortar) e .cf-cards (cartões de texto). */
.cf { --w: min(62vw, 460px); position: relative; max-width: 1040px; margin: 36px auto 0; }
.cf-wide { --w: min(80vw, 520px); }
.cf-cards { --w: min(80vw, 420px); }

.cf-track {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 8px calc(50% - var(--w) / 2);
  -webkit-overflow-scrolling: touch;
}
.cf-cards .cf-track { align-items: stretch; }
.cf-track::-webkit-scrollbar { display: none; }
.cf-track > * {
  flex: none; width: var(--w);
  scroll-snap-align: center;
  transform: scale(.86); opacity: .38; cursor: pointer;
  transition: transform .6s cubic-bezier(.22,.61,.36,1), opacity .6s cubic-bezier(.22,.61,.36,1);
  user-select: none;
}
.cf-track > .on { transform: none; opacity: 1; cursor: default; user-select: auto; }
.cf-track > img {
  height: auto; aspect-ratio: 5 / 7; object-fit: cover;
  border-radius: 28px; border: 1px solid var(--line); background: #000;
  -webkit-user-drag: none;
}
.cf-track > img.on { cursor: zoom-in; }
.cf-wide .cf-track > img { aspect-ratio: auto; object-fit: contain; border-radius: 20px; background: #0b0d12; }

.cf-btn {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 2;
  width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(10,8,10,.6); color: #f5f5f7; border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: background .3s, transform .3s;
}
.cf-btn:hover { background: rgba(10,8,10,.85); }
.cf-btn:active { transform: scale(.94); }
.cf-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cf-btn svg { width: 20px; height: 20px; }
.cf-prev { left: max(12px, calc(50% - var(--w) / 2 - 24px)); }
.cf-next { right: max(12px, calc(50% - var(--w) / 2 - 24px)); }

.cf-foot { margin-top: 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cf-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0 16px; }
.cf-dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--card-hover); transition: width .4s, background .4s;
}
.cf-dots button.on { width: 24px; background: var(--accent); }
.cf-count { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Foto ampliada */
.cf-zoom {
  position: fixed; inset: 0; z-index: 100; display: none;
  place-items: center; padding: 24px;
  background: rgba(0,0,0,.9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  cursor: zoom-out;
}
.cf-zoom.open { display: grid; }
.cf-zoom img { max-width: min(100%, 640px); max-height: 100%; border-radius: 20px; }

@media (max-width: 640px) {
  .cf { --w: 66vw; }
  .cf-wide, .cf-cards { --w: 82vw; }
  .cf-track { gap: 10px; }
  .cf-btn { width: 40px; height: 40px; }
  .cf-prev { left: 8px; }
  .cf-next { right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .cf-track > * { transition: none; }
}