/* ==========================================================================
   Hyper — Galeria de cases / prova social real (fotos de eventos, troféus).
   Mosaico masonry. Tema claro (hyper-tokens.css).
   ========================================================================== */
/* bloco fundido dentro da seção "Autoridade / +500" */
.hcz-block {
  margin: 60px auto 0; max-width: 1160px;
  font-family: "Oakes Grotesk", sans-serif;
}
.hcz-head { max-width: 760px; margin: 0 auto 38px; text-align: center; }
/* frase de apoio na sequência do "+500" (não é um segundo título) */
.hcz-head--inline { max-width: 720px; margin: 16px auto 34px; padding: 0 24px; text-align: center; }
.hcz-lead {
  font-size: 19px; line-height: 1.55; color: var(--hy-text-muted); margin: 0;
  font-family: "Oakes Grotesk", sans-serif;
}
.hcz-lead em { font-style: normal; font-weight: 600; color: var(--hy-text); }
@media (max-width: 560px) { .hcz-lead { font-size: 16.5px; } }
.hcz-title {
  font-size: 40px; line-height: 1.12; font-weight: 600;
  color: var(--hy-text); letter-spacing: -0.5px; margin: 0 0 16px;
}
.hcz-title em { font-style: normal; color: var(--hy-green); }
.hcz-sub { font-size: 18px; line-height: 1.55; color: var(--hy-text-muted); margin: 0; }

/* carrossel deslizante (loop infinito) */
.hcz-carousel {
  width: 100%; overflow: hidden; padding: 8px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.hcz-track {
  display: flex; gap: 18px; width: max-content;
  animation: hcz-scroll 70s linear infinite;
}
.hcz-carousel:hover .hcz-track { animation-play-state: paused; }
@keyframes hcz-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.hcz-item {
  flex: 0 0 auto; width: 300px; height: 400px;
  position: relative; border-radius: 16px; overflow: hidden;
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
  border: 1px solid var(--hy-border);
}
.hcz-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hcz-item::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(6,13,0,.78) 100%);
  opacity: 0; transition: opacity .25s;
}
.hcz-item.has-cap::after { opacity: 1; }
.hcz-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 16px 18px; color: #fff;
}
.hcz-cap b { display: block; font-size: 18px; font-weight: 700; line-height: 1.15; }
.hcz-cap span { font-size: 13px; color: rgba(255,255,255,.82); }

@media (max-width: 560px) { .hcz-item { width: 248px; height: 340px; } }