/* ==========================================================================
   bb2026 — CURSOR PERSONALIZADO EN CRUZ + ZONAS DE NAVEGACION DEL HERO

   JERARQUIA DE CAPAS: el sistema llega hasta 999 (skip-link). El cursor
   tiene que ir por encima de TODO, incluidos lightbox y modales (500+),
   asi que se le da 1200. Es el unico elemento del tema por encima de 999.

   AMBITO — donde SI y donde NO se sustituye el cursor nativo:
     SI  -> zonas marcadas con [data-bb-cursor]: el hero (carrusel) y las
            zonas puramente fotograficas sin contenido interactivo propio.
     NO  -> texto corrido, cabecera, menu, footer, enlaces, botones y
            campos de formulario. Ahi el cursor nativo informa (mano,
            barra de texto) y quitarlo perjudica la usabilidad. El JS
            devuelve el nativo en cuanto el puntero entra en un elemento
            interactivo, incluso dentro de una zona.

   El `cursor: none` NO se aplica desde una regla suelta: cuelga de
   .bb-has-cursor, clase que solo pone el JS cuando el dispositivo tiene
   puntero fino y hover. Asi en movil, en tableta y sin JS el cursor
   nativo se queda exactamente como estaba.
   ========================================================================== */

.bb-has-cursor [data-bb-cursor],
.bb-has-cursor [data-bb-cursor] * { cursor: none; }

/* Excepcion dentro de una zona: sobre algo interactivo, cursor nativo. */
.bb-has-cursor [data-bb-cursor] a,
.bb-has-cursor [data-bb-cursor] button:not(.bb-hhero__zone),
.bb-has-cursor [data-bb-cursor] input,
.bb-has-cursor [data-bb-cursor] textarea,
.bb-has-cursor [data-bb-cursor] select,
.bb-has-cursor [data-bb-cursor] [role="button"] { cursor: pointer; }

/* --------------------------------------------------------------------------
   EL CURSOR
   Decorativo puro: aria-hidden y pointer-events none, para que no
   intercepte ni un clic ni la lectura de un lector de pantalla.
   -------------------------------------------------------------------------- */
.bb-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1200;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px; /* centrado en la punta del puntero */
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s linear, width 0.25s var(--bb-ease), height 0.25s var(--bb-ease), margin 0.25s var(--bb-ease);
}
.bb-cursor.is-on { opacity: 1; }

/* Los galones son bastante mas grandes que la cruz. */
.bb-cursor.is-prev,
.bb-cursor.is-next {
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
}

.bb-cursor__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* Trazo de 1px real: sin vector-effect el scale del viewBox lo engordaria. */
.bb-cursor__svg * {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* Solo se ve la forma del estado activo. */
.bb-cursor__cross,
.bb-cursor__prev,
.bb-cursor__next { display: none; }
.bb-cursor.is-cross .bb-cursor__cross,
.bb-cursor.is-prev .bb-cursor__prev,
.bb-cursor.is-next .bb-cursor__next { display: block; }

/* COLOR ADAPTATIVO: claro sobre foto oscura, tinta sobre papel. El tono
   lo declara cada zona con data-bb-cursor="light|dark" y el JS lo copia
   aqui. La sombra garantiza que nunca desaparezca por falta de contraste
   aunque la foto tenga una zona del mismo tono que el trazo. */
.bb-cursor--light {
  color: var(--bb-paper);
  filter: drop-shadow(0 0 2px rgba(28, 27, 25, 0.55));
}
.bb-cursor--dark {
  color: var(--bb-ink);
  filter: drop-shadow(0 0 2px rgba(247, 245, 242, 0.75));
}

/* Sin movimiento: el JS ya coloca el cursor sin interpolar; aqui quitamos
   tambien la transicion de tamano para que el cambio de estado sea seco. */
@media (prefers-reduced-motion: reduce) {
  .bb-cursor { transition: none; }
}

/* --------------------------------------------------------------------------
   ZONAS DE NAVEGACION DEL HERO (25% izquierda / 25% derecha)

   Accesibilidad: son <button> con tabindex="-1" y aria-hidden, o sea que
   NO entran en el orden de tabulacion y no atrapan el foco. La
   navegacion por teclado del carrusel no depende de ellas: la resuelve
   el modulo keyboard de Swiper (ver home.js).

   No tapan enlaces reales: se cortan por arriba del pie del hero
   (contador, enlace "Bajar" y caja-etiqueta) reservando el alto de la
   caja + 64px. En escritorio el pie llega a ~60px y la caja a 120px, con
   184px reservados; en movil el pie llega a ~152px y la caja a 108px,
   con 172px reservados. En los dos casos queda por debajo del corte.
   -------------------------------------------------------------------------- */
.bb-hhero__zones {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: calc(var(--bb-tag-size) + var(--bb-s5));
  z-index: 5;
  pointer-events: none;
}
.bb-hhero__zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 25%;
  padding: 0;
  border: 0;
  background: none;
  pointer-events: auto;
}
.bb-hhero__zone--prev { left: 0; }
.bb-hhero__zone--next { right: 0; }

/* Sin puntero fino (movil, tableta) las zonas no aportan y estorban al
   swipe nativo del carrusel: se retiran por completo. */
@media (hover: none), (pointer: coarse) {
  .bb-hhero__zones { display: none; }
}