/* ─── Pantalla con ítems flotantes (Home v3) ─────────────────────────────────
   Todo scopeado bajo .hv3hv. Solo tokens; transparencias con color-mix().
   Anima solo transform y opacity. Dark mode con [data-theme="dark"].

   Cada captura apila su pantalla y sus dos ítems flotantes. La primera define
   la altura. La captura inactiva queda oculta (visibility) cuando termina de
   salir, así no recibe foco ni la lee un lector de pantalla. */

.hv3hv {
  --hv3hv-ease: cubic-bezier(.2, .7, .2, 1);
  --hv3hv-sombra-pantalla: 0 2rem 4rem -1.5rem color-mix(in srgb, var(--azul) 24%, transparent);
  --hv3hv-sombra-flotante: 0 1.5rem 3rem -1rem color-mix(in srgb, var(--azul) 30%, transparent);
  position: relative;
  --hv3hv-k: 0.4;                      /* factor de las distancias bajo 992px */
}

[data-theme="dark"] .hv3hv {
  --hv3hv-sombra-pantalla: 0 2rem 4rem -1.5rem color-mix(in srgb, var(--celeste-claro) 95%, transparent);
  --hv3hv-sombra-flotante: 0 1.5rem 3rem -1rem color-mix(in srgb, var(--celeste-claro) 95%, transparent);
}

.hv3hv .hv3hv-slides { position: relative; }

.hv3hv .hv3hv-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
  visibility: hidden;
  transition: visibility 0s linear 0.9s;
}

.hv3hv .hv3hv-slide:first-child { position: relative; }

.hv3hv .hv3hv-slide.is-activa {
  z-index: 1;
  visibility: visible;
  transition-delay: 0s;
}

.hv3hv .hv3hv-pantalla {
  margin: 0;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.hv3hv .hv3hv-pantalla img,
.hv3hv .hv3hv-flotante img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
}

.hv3hv .hv3hv-pantalla img { box-shadow: var(--hv3hv-sombra-pantalla); }
.hv3hv .hv3hv-flotante img { box-shadow: var(--hv3hv-sombra-flotante); }

/* Posición: el style de cada ítem trae --hv3hv-x e --hv3hv-y (las distancias
   de los campos); la esquina elige desde qué lado se miden. */
.hv3hv .hv3hv-left { left: calc(var(--hv3hv-x) * var(--hv3hv-k)); }
.hv3hv .hv3hv-right { right: calc(var(--hv3hv-x) * var(--hv3hv-k)); }
.hv3hv .hv3hv-top { top: calc(var(--hv3hv-y) * var(--hv3hv-k)); }
.hv3hv .hv3hv-bottom { bottom: calc(var(--hv3hv-y) * var(--hv3hv-k)); }

/* Ítems flotantes: salen rápido (0.4 s) y entran cuando la pantalla nueva ya
   se está viendo, uno tras otro (0.8 s y 1.3 s). Secuencia completa: ~2 s.
   Ancho y posición vienen en el style de cada ítem (campos del módulo). */
.hv3hv .hv3hv-flotante {
  display: none;
  position: absolute;
  z-index: 2;
  opacity: 0;
  transform: translate3d(0, 1.5rem, 0);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.hv3hv .hv3hv-slide.is-activa .hv3hv-pantalla {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s ease 0.3s, transform 1.2s var(--hv3hv-ease) 0.3s;
}

.hv3hv .hv3hv-slide.is-activa .hv3hv-flotante--1 {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease 0.8s, transform 0.8s var(--hv3hv-ease) 0.8s;
}

.hv3hv .hv3hv-slide.is-activa .hv3hv-flotante--2 {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease 1.3s, transform 0.8s var(--hv3hv-ease) 1.3s;
}

/* Dentro del editor de HubSpot se muestran todas las capturas en fila para
   poder revisar cada una. */
.hv3hv.hv3hv-editor .hv3hv-slide { position: relative; visibility: visible; margin-bottom: 4rem; }
.hv3hv.hv3hv-editor .hv3hv-pantalla,
.hv3hv.hv3hv-editor .hv3hv-flotante { opacity: 1; transform: none; transition: none; }

@media (min-width: 768px) {
  .hv3hv .hv3hv-pantalla img { border-radius: 1rem; }
  .hv3hv .hv3hv-flotante { display: block; }
}

@media (min-width: 992px) {
  .hv3hv { --hv3hv-k: 1; }
}

/* Paralaje con scroll-driven animations (sin JS). Usa la propiedad
   `translate`, que no se pisa con las transiciones de `transform`. Sin
   soporte, queda estático y completo. */
@supports (animation-timeline: scroll()) {
  @media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
    .hv3hv .hv3hv-slides {
      animation: hv3hv-paralaje-lejos linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 90vh;
    }

    .hv3hv .hv3hv-flotante {
      animation: hv3hv-paralaje-cerca linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 90vh;
    }
  }
}

@keyframes hv3hv-paralaje-lejos { to { translate: 0 -2rem; } }
@keyframes hv3hv-paralaje-cerca { to { translate: 0 -4rem; } }

@media (prefers-reduced-motion: reduce) {
  .hv3hv .hv3hv-pantalla,
  .hv3hv .hv3hv-flotante,
  .hv3hv .hv3hv-slide.is-activa .hv3hv-pantalla,
  .hv3hv .hv3hv-slide.is-activa .hv3hv-flotante--1,
  .hv3hv .hv3hv-slide.is-activa .hv3hv-flotante--2 { transition: none; }
}