/* ==========================================================================
   La mano robótica de la portada

   Ocupa el sitio que tenía el sello en la columna derecha del hero y hereda
   su comportamiento: una banda propia en pantallas anchas, en fila con los
   botones cuando el hero se apila, y retirada en móvil —donde el espacio es
   para el buscador y el sello sigue estando en la barra.

   La imagen viene recortada, así que no lleva marco ni fondo: se apoya sobre
   el color de la página y la sombra la dibuja el propio contorno de la mano
   con `drop-shadow`, que sigue el canal alfa en lugar de la caja.
   ========================================================================== */

.mano{
  position:relative;
  margin:0;
  width:clamp(240px,27vw,430px);
  max-width:100%;
  /* La proporción del recorte: 1672 × 941. */
  aspect-ratio:1672/941;
  overflow:visible;
}

.mano img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  /* El giro pivota sobre la muñeca, no sobre el centro de la caja: es el
     punto por donde el brazo entra en escena y lo que mantiene la lupa como
     el extremo que más viaja, igual que un gesto de verdad. */
  transform-origin:78% 62%;
  will-change:transform;
  /* La sombra va en la imagen, no en el contenedor: sigue el contorno de la
     mano —`drop-shadow` mira el canal alfa— y gira con ella.

     Estuvo en el contenedor, junto a un `mask-image` que desvanecía el brazo.
     Filtro y máscara juntos obligan a componer la figura en una capa aparte,
     y sobre el degradado de la tarjeta esa capa dibujaba un rectángulo tenue
     alrededor de la mano. El desvanecido ahora viene horneado en el alfa del
     propio archivo, así que la máscara sobra y el rectángulo desaparece. */
  filter:drop-shadow(0 18px 28px rgba(36,63,92,.20));
}

/* Mientras el guion no ha arrancado la imagen está quieta y centrada; no hay
   estado intermedio que disimular, así que `viva` solo marca que el
   movimiento ya corre por si algún estilo quiere saberlo. */

@media(max-width:1040px){
  .mano{width:clamp(200px,30vw,300px)}
}

@media(max-width:720px){
  .mano{display:none}
}