/* Portada curada: las fotos flotan y se mueven a distintas velocidades. */

.cur-hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
}

.cur-hero__title {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  width: min(94vw, 1400px);
  text-align: center;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.cur-hero__title h1 { font-size: clamp(2.8rem, 12.5vw, 12rem); }
.cur-hero__sub {
  margin: clamp(14px, 2vw, 26px) auto 0;
  max-width: 46ch;
  font-size: clamp(.85rem, 1.1vw, 1rem);
  color: var(--ink-soft);
  letter-spacing: .01em;
}

.cur-hero__scroll {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: clamp(20px, 4vh, 44px);
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 8px;
  animation: bob 2.6s var(--ease) infinite;
}
@keyframes bob { 0%,100% { transform: translate(-50%, 0) } 50% { transform: translate(-50%, 7px) } }

/* Cada foto flotante */
.float {
  position: absolute;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--paper-2);
  box-shadow: 0 1px 2px rgba(20,18,15,.04);
  will-change: transform;
  cursor: zoom-in;
}
.float img {
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity .7s var(--ease), transform .9s var(--ease);
}
.float img.is-loaded { opacity: 1; }
.float:hover img { transform: scale(1.03); }

/* Zona de flujo tras el hero */
.cur-flow {
  position: relative;
  width: 100%;
  padding-inline: var(--pad-x);
  margin-top: clamp(40px, 8vw, 90px);
}

.cur-caption {
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: .78rem;
  color: var(--muted);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.float:hover .cur-caption,
.float:focus-within .cur-caption { opacity: 1; transform: none; }

.cur-outro {
  position: relative;
  z-index: 2;
  text-align: center;
  padding-block: clamp(80px, 14vw, 200px);
}

/* Reveal al entrar en pantalla */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (max-width: 760px) {
  .cur-hero { height: 92svh; }
  .cur-hero__title { top: 44%; }
}

@media (prefers-reduced-motion: reduce) {
  .float { transform: none !important; }
  .reveal { opacity: 1; transform: none; }
}