/* ===== Hero "plano secuencia" — shared by the home (#hero) and the sales-office
   presentation cover (/presentacion). Behaviour in js/hero.js. ===== */
/* Chosen by Noelia 2026-10-01 (replaced the video).
   One continuous take: every image is already moving when it fades in and keeps
   moving while it fades out (15s move, 9.5s on screen, 2.6s dissolve), so it never
   reads as a slideshow. Shared finish: one colour grade, vignette, film grain.
   Behaviour (cycle, parallax, grain tile) lives in js/hero.js. */
.hero-media {
  position: relative;
  height: var(--hero-video-h);
  overflow: hidden;
  isolation: isolate; /* grain/vignette stack inside; the lead form stays above */
  background: var(--color-neutro-oscuro);
}
/* Parallax layer: oversized so scroll/pointer offsets never show its edges */
.hero-par { position: absolute; top:-4%; right:-4%; bottom:-4%; left:-4%; will-change: transform; }
.hero-shot { position: absolute; top:0; right:0; bottom:0; left:0; margin: 0; opacity: 0; z-index: 0; }
.hero-shot picture { display: block; width: 100%; height: 100%; } /* /presentacion swaps crops by orientation */
.hero-shot img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.9) contrast(1.04) brightness(1.01);
  animation: var(--move) 15s linear forwards;
  animation-play-state: paused;
}
.hero-shot.is-on, .hero-shot.is-off { opacity: 1; }
.hero-shot.is-on { z-index: 2; transition: opacity 2.6s cubic-bezier(.45, 0, .25, 1); }
.hero-shot.is-off { z-index: 1; }
.hero-shot.is-on img, .hero-shot.is-off img { animation-play-state: running; }
.hero-media.is-paused .hero-shot img { animation-play-state: paused; }
.hero-shot:nth-child(4n+1) img { --move: hero-push; }
.hero-shot:nth-child(4n+2) img { --move: hero-drift; }
.hero-shot:nth-child(4n+3) img { --move: hero-rise; }
.hero-shot:nth-child(4n+4) img { --move: hero-pull; }
/* Exteriors (data-whole): the tower is NEVER cut (Noelia's standing rule, 2026-10-05).
   No camera move; the image box matches the visible stage (the parallax layer is 8% larger).
   Stage narrower than the image -> cover, framed by --pos so the tower stays inside.
   Stage wider than the image (.is-fit, set by hero.js) -> whole image, sides filled with a
   blurred, darkened copy of itself. */
.hero-shot[data-whole] img {
  position: absolute; top: 3.704%; bottom: 3.704%; left: 3.704%; width: 92.592%; height: 92.592%;
  object-position: var(--pos, 50%) 50%; animation: none !important; transform: none;
}
.hero-shot[data-whole].is-fit img { object-fit: contain; object-position: 50% 50%; }
.hero-fill { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: none; background-size: cover; background-position: center;
  filter: blur(30px) brightness(.5) saturate(.85); transform: scale(1.12); }
.hero-shot.is-fit .hero-fill { display: block; }
@keyframes hero-push  { from { transform: scale(1.02); } to { transform: scale(1.13); } }
@keyframes hero-drift { from { transform: scale(1.1) translateX(2.2%); } to { transform: scale(1.12) translateX(-2.2%); } }
@keyframes hero-rise  { from { transform: scale(1.1) translateY(2%); } to { transform: scale(1.12) translateY(-1.6%); } }
@keyframes hero-pull  { from { transform: scale(1.14); } to { transform: scale(1.03); } }
.hero-vignette {
  position: absolute; top:0; right:0; bottom:0; left:0; z-index: 3; pointer-events: none;
  background: radial-gradient(ellipse 85% 75% at 45% 50%, transparent 55%, rgba(16, 24, 22, .42));
}
.hero-grain {
  position: absolute; top:-50%; right:-50%; bottom:-50%; left:-50%; z-index: 3; pointer-events: none;
  opacity: .09; mix-blend-mode: overlay; background-size: 180px 180px;
  animation: hero-grain .9s steps(6) infinite;
}
@keyframes hero-grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-shot, .hero-shot img, .hero-grain { transition: none !important; animation: none !important; }
}