/* GesMan HERMES — Visuales de producto y flotacion del landing.
 *
 * NO trae sistema de aparicion propio: la portada YA tiene `.reveal` + `.is-visible` con su
 * IntersectionObserver. Duplicarlo habria significado dos observadores haciendo el mismo trabajo y
 * dos reglas peleando por la misma opacidad. Aca se reutiliza esa clase y solo se agrega lo que
 * falta: la flotacion al hacer scroll y el marco de los mockups.
 *
 * Solo se animan `transform` y `opacity`, las dos propiedades que el navegador resuelve en la GPU
 * sin recalcular el layout. Animar `top` o `margin` daria tirones al desplazar.
 */

/* ---------- Flotacion (parallax) ---------- */
/* El desplazamiento lo escribe el JS en --hm-y. Sin JS vale 0 y la pieza queda quieta en su sitio. */
.hm-flota {
  --hm-y: 0px;
  transform: translate3d(0, var(--hm-y), 0);
  will-change: transform;
}
/* Cuando el elemento ademas es `.reveal`, la aparicion la maneja la portada; aca solo se suma el
   desplazamiento una vez visible, para que no compitan por la misma propiedad. */
.reveal.hm-flota { transform: translateY(28px); }
.reveal.hm-flota.is-visible { transform: translate3d(0, var(--hm-y), 0); }

/* ---------- Banda de producto ---------- */
/* Margen superior negativo: el mockup sube y monta sobre el limite con el heroe, que es lo que lo
   hace leerse por delante de la pagina en vez de como una fila mas. */
.hm-banda-producto {
  position: relative;
  z-index: 2;
  margin-top: clamp(-6rem, -7vw, -3rem);
  padding: 0 0 clamp(2rem, 5vw, 4rem);
  pointer-events: none;              /* no roba el clic a lo que quede debajo */
}
/* "Descender" se retira cuando hay banda de producto.
   Va en `position: absolute`, asi que no ocupa lugar en el flujo: subirlo para esquivar el mockup
   solo lo mandaba encima de la nota de la prueba gratis, cambiando una colision por otra. Y ya no
   hace falta —el mockup asomando por el borde inferior es, el mismo, la invitacion a seguir
   bajando—. Es decorativo (`aria-hidden`), asi que ocultarlo no le quita nada a nadie.

   Selector plano a proposito: con `:has()` un navegador que no lo soporte invalida la regla entera
   y reaparece justo el solape que esto viene a corregir. Esta hoja solo la carga este landing, que
   siempre trae la banda. */
.hero .scroll-cue { display: none; }
.hm-banda-producto .hm-marco { pointer-events: auto; }
.hm-banda-producto .container { max-width: 1060px; }

/* ---------- Marco de los mockups ---------- */
.hm-marco {
  position: relative;
  display: block;
  margin: 0;
}
.hm-marco img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  /* Sombra en dos planos: la cercana define el borde, la lejana despega la pieza del fondo. */
  box-shadow:
    0 1px 0 rgba(253, 230, 138, .12),
    0 26px 50px rgba(2, 8, 23, .55),
    0 64px 120px rgba(2, 8, 23, .42);
}
/* Halo dorado detras del mockup: refuerza que la pieza esta por delante de la pagina. */
.hm-marco::before {
  content: "";
  position: absolute;
  inset: 10% 10% -8%;
  background: radial-gradient(58% 58% at 50% 50%, rgba(244, 180, 0, .18), transparent 72%);
  filter: blur(44px);
  z-index: -1;
  pointer-events: none;
}
/* Un solo pie para toda figura del pack, sea captura enmarcada o diagrama. Estaba atado a
   `.hm-marco`, asi que cualquier figura de otra clase salia con el estilo por defecto del
   navegador: alineada a la izquierda y del tamano del cuerpo de texto. */
.hm-marco figcaption,
.hm-ilustra-bloque figcaption {
  margin-top: .7rem;
  text-align: center;
  font-size: .8rem;
  color: var(--muted, #9fb0d0);
}

/* Barrido de luz al aparecer. Se engancha a `.is-visible`, la clase que ya pone la portada. */
.hm-brillo { position: relative; overflow: hidden; border-radius: 12px; }
.hm-brillo::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(253, 230, 138, .18), transparent);
  transform: skewX(-14deg);
  pointer-events: none;
}
.hm-brillo.is-visible::after { animation: hm-barrido 1.6s cubic-bezier(.3, .1, .3, 1) .3s 1; }
@keyframes hm-barrido { to { left: 118%; } }

/* ---------- Ilustraciones de seccion ---------- */
.hm-ilustra {
  display: block;
  width: 100%;
  max-width: 860px;
  height: auto;
  margin: 0 auto;
}
.hm-ilustra-ancha { max-width: 1080px; }

/* Bloque de dos columnas: texto a un lado, visual al otro. */
.hm-dueto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.4rem, 4vw, 3.2rem);
  align-items: center;
}
.hm-dueto.invertido > :first-child { order: 2; }

@media (max-width: 900px) {
  .hm-dueto { grid-template-columns: minmax(0, 1fr); }
  .hm-dueto.invertido > :first-child { order: 0; }
}

/* ---------- Bloques de ilustracion y pares de mockups ---------- */
.hm-ilustra-bloque { margin: 0; }
/* Dentro de una grilla de dos columnas, un tercer hijo cae en la columna 1 de la fila 2 y la
   ilustracion queda partida a la mitad. Estas figuras cierran su seccion: ocupan el ancho
   completo, bajo ambas columnas. `1 / -1` sirve igual cuando la grilla colapsa a una columna. */
.about-grid > .hm-ilustra-bloque {
  grid-column: 1 / -1;
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
/* Par de diagramas hermanos. A diferencia del `hm-dueto` (asimetrico, texto contra visual), aca
   las dos piezas son iguales y estan dibujadas sobre el mismo lienzo para leerse como UNA sola:
   columnas simetricas, alineadas arriba y sin desfase vertical. Desalinearlas romperia el par. */
.hm-par-diagramas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.4rem, 4vw, 3rem);
  align-items: start;
  margin-top: clamp(2.4rem, 6vw, 4.5rem);
}
.hm-par-diagramas .hm-ilustra { max-width: 560px; }
@media (max-width: 900px) {
  .hm-par-diagramas { grid-template-columns: minmax(0, 1fr); }
}

.hm-cierre-problemas { margin-top: clamp(2.2rem, 5vw, 3.8rem); }
figure.hm-ilustra-bloque + figure.hm-ilustra-bloque { margin-top: 0; }

/* ---------- Menos movimiento ---------- */
/* La portada ya neutraliza `.reveal`. Aca se neutraliza lo propio: sin esto, la flotacion seguiria
   corriendo para quien pidio no tener animaciones. */
@media (prefers-reduced-motion: reduce) {
  .hm-flota,
  .reveal.hm-flota,
  .reveal.hm-flota.is-visible { transform: none; }
  .hm-brillo.is-visible::after { animation: none; }
}