/* ==========================================================================
   bento — soporte CSS de js/motion.js
   No está en el Figma: pedido del usuario 2026-11-11, lenguaje de movimiento
   tomado de la home de Mercedes Maspero (scroll suave + revelados por línea).
   ========================================================================== */

/* Títulos ocultos hasta que GSAP los parte; si el JS no carga, aparecen a los 2.5s */
.bn-js-anim [data-lines] {
  visibility: hidden;
  animation: bn-show 0s 2.5s forwards;
}
@keyframes bn-show { to { visibility: visible; } }

/* Lenis (equivalente a lenis.css) */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }

/* Sin JS: el ancla igual se desliza */
@media (prefers-reduced-motion: no-preference) {
  html:not(.lenis) { scroll-behavior: smooth; }
}

/* Imágenes que se revelan con recorte: la imagen escala adentro */
.bn-hero_media > img,
.bn-case_media img { will-change: transform; }

/* Método fijado (desktop): ocupa toda la pantalla mientras avanza por los pasos */
@media (min-width: 992px) {
  .bn-method { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; }
  .bn-method > .bn-method_inner { width: 100%; }
}

/* ==========================================================================
   Cursor: punto chico en negativo (pedido del usuario 2026-11-11, ref.
   minimum.run: círculo blanco 12px con mix-blend-mode: difference).
   Solo con mouse; motion.js lo crea y agrega html.bn-has-dot.
   ========================================================================== */
@media (pointer: fine) {
  html.bn-has-dot, html.bn-has-dot * { cursor: none !important; }
  html.bn-has-dot input, html.bn-has-dot textarea { cursor: text !important; }
}
.bn-dot {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease-out;
  will-change: transform;
}
.bn-dot.is-on { opacity: 1; }