/* ==========================================================================
   gallery-wall.css — muro de interfaces con la mano en primer plano.

   ARQUITECTURA DEL EFECTO (esto es lo que hace que se parezca a la referencia)
   La mano NO recorre nada: funciona como una camara fija en primer plano.
   Lo que viaja es la pared de capturas que pasa por DETRAS. Por eso la mano
   vive fuera de .gw-track, en su propia capa.

   El "pin" es position:sticky, no ScrollTrigger pin:true: mismo resultado,
   sin pin-spacer y sin saltos de layout. Al llegar al final de la seccion el
   sticky se libera solo y la siguiente seccion empuja la escena hacia arriba.
   ========================================================================== */

.gallery-wall{
  position:relative;
  z-index:1;
  height:280vh;              /* el "carrete": cuanto scroll dura la escena */
  /* Blanco: encaja con la escena de particulas que va justo encima (blanco
     puro) y con el ecosistema de debajo (#fafbfc). Las dos costuras quedan
     por debajo del umbral visible. */
  background:#fff;
  --gw-w:clamp(280px, 23vw, 400px);   /* capturas un poco mas presentes */
  --gw-gap:1.4vw;
  --gw-corridor:10%;                  /* acerca la pared al telefono */
}

.gw-stage{
  position:sticky;
  top:0;
  /* svh = viewport con la barra de URL VISIBLE. En moviles, 100vh mide el
     viewport grande, asi que la escena quedaba mas alta que la pantalla y se
     cortaba por abajo mientras la barra estaba a la vista. Con svh la escena
     entera cabe siempre; y al ser un valor estable (a diferencia de dvh) la
     animacion pegajosa no da saltos cuando la barra aparece o desaparece. */
  height:100vh;
  height:100svh;
  width:100%;
  overflow:hidden;           /* recorta las columnas exteriores a proposito */
  background:#fff;
  /* Aisla el repintado de la escena del resto del documento. */
  contain:layout paint;
}

/* --------------------------------------------------------------------------
   LA PARED. Un unico contenedor movido con transform: las 12 tarjetas no se
   recalculan individualmente en ningun frame, viajan como una sola capa.
   -------------------------------------------------------------------------- */
.gw-track{
  position:absolute;
  inset:0;
  will-change:transform;
  transform:translate3d(0,0,0);
}

.gw-card{
  position:absolute;
  width:var(--gw-w);
  aspect-ratio:776 / 1494;   /* el de las capturas: nunca se deforman */
  border-radius:26px;
  overflow:hidden;
  /* Sobre blanco el borde claro desaparecia y la sombra negra ensuciaba:
     ambos pasan al lenguaje de sombra del resto del sitio. */
  border:1px solid rgba(23,32,46,.07);
  background:#f2f4f7;
  box-shadow:0 22px 55px rgba(45,55,72,.13);
}
.gw-card img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;          /* el ratio del contenedor ES el de la imagen */
  object-position:top center;
}

/* Cuatro columnas con un corredor central libre, SIMETRICO por construccion.
   Las dos de la izquierda se anclan con `right` y las de la derecha con
   `left`, ambas medidas desde el 50%: asi el pasillo queda siempre centrado
   en la mano, sin depender de cuanto ocupe la barra de scroll (que altera
   las unidades vw y descentraba el corredor).
   Las exteriores se salen del viewport a proposito: la composicion tiene que
   sentirse mas grande que la pantalla. */
.gw-c1{right:calc(50% + var(--gw-corridor) + var(--gw-w) + var(--gw-gap))}
.gw-c2{right:calc(50% + var(--gw-corridor))}
.gw-c3{left: calc(50% + var(--gw-corridor))}
.gw-c4{left: calc(50% + var(--gw-corridor) + var(--gw-w) + var(--gw-gap))}

.gw-r1{top:18vh}
.gw-r2{top:94vh}
.gw-r3{top:166vh}

/* --------------------------------------------------------------------------
   LA MANO. Capa independiente, por encima de todo, practicamente fija.
   -------------------------------------------------------------------------- */
/* En escritorio la mano entra desde abajo a la derecha, como en la referencia:
   telefono grande, palma dominante y antebrazo saliendo fuera del escenario.
   Se ancla por arriba para que aumentar su escala no esconda el telefono.
   Como la palma ocupa mucha mas masa a la derecha que el telefono, el centro
   geometrico del PNG no coincide con el centro visual del dispositivo. */
.gw-hand{
  position:absolute;
  /* El centro optico del telefono queda en el centro del viewport. */
  left:50%;
  top:12vh;
  bottom:auto;
  width:clamp(600px, 58vw, 840px);
  height:auto;
  /* El PNG extendido incluye bastante transparencia y antebrazo a la derecha.
     Medido sobre el propio archivo (1049x1500): el marco del telefono ocupa
     de 19.4% a 58.4% del ancho, asi que su eje optico cae en el 38.89%.
     Con left:50% + este desplazamiento el telefono —no el rectangulo
     completo de la imagen— queda centrado en el corredor. El mismo valor
     sirve en cualquier breakpoint porque es un porcentaje del PNG. */
  transform:translateX(-38.89%);
  pointer-events:none;
  z-index:20;
  filter:drop-shadow(0 26px 42px rgba(45,55,72,.22));
  will-change:transform;
}

/* --------------------------------------------------------------------------
   TABLET
   -------------------------------------------------------------------------- */
@media(max-width:1024px){
  .gallery-wall{height:250vh}
  .gallery-wall{--gw-w:clamp(240px, 26vw, 320px);--gw-corridor:12%}
  .gw-hand{left:50%;top:auto;width:50vw;bottom:-1%}
}

/* --------------------------------------------------------------------------
   MOVIL. No se meten cuatro columnas completas: se dejan MUY fuera del
   viewport para que sigan viendose solo fragmentos, que es lo que da la
   sensacion de pared enorme.
   -------------------------------------------------------------------------- */
@media(max-width:768px){
  /* Mismo recorrido largo que en escritorio: el sticky permanece una escena
     completa mientras las ocho capturas suben vinculadas al scroll. */
  .gallery-wall{height:280vh;height:280svh;min-height:1400px}
  .gallery-wall,.gw-stage{background:#fff}

  /* La barra de URL del navegador movil se esconde al bajar y en ese momento
     el viewport crece. El escenario, medido en svh (viewport con la barra
     VISIBLE), se quedaba corto: debajo asomaba el fondo blanco de la seccion
     como un bloque vacio, y el telefono de la mano —posicionado en vh— venia
     cortado justo en esa linea. lvh es el viewport con la barra oculta, asi
     que el escenario llega siempre al canto; y al ser un valor fijo como vh
     (no como dvh) no reintroduce los saltos que el sticky daba al aparecer y
     desaparecer la barra. Solo el alto del escenario: las tarjetas siguen
     colocadas en svh y el recorrido de la seccion no cambia. */
  .gw-stage{
    height:100lvh;
    /* Cinturon ademas del tirante. `lvh` es, por definicion, el viewport mas
       alto posible, asi que deberia bastar; pero si el navegador no lo aplica
       —o lo resuelve por debajo de lo que se ve— el escenario queda mas corto
       que la pantalla y por debajo asoma el fondo blanco de la seccion como
       un bloque vacio al bajar. `min-height:100dvh` obliga a que SIEMPRE
       cubra lo visible. Mientras lvh >= dvh (que es su definicion) esta linea
       no cambia nada, asi que no reintroduce los saltos del sticky. */
    min-height:100dvh;
  }
  /* Las ocho capturas unicas se redistribuyen en cuatro filas de dos. No se
     elimina contenido: solo se oculta la tercera fila de escritorio porque
     repite cuatro de las ocho imagenes anteriores. */
  .gallery-wall{--gw-w:48vw}
  .gw-r3{display:none}

  .gw-r1.gw-c1,.gw-r1.gw-c3,
  .gw-r2.gw-c1,.gw-r2.gw-c3{left:-22vw!important;right:auto!important}
  .gw-r1.gw-c2,.gw-r1.gw-c4,
  .gw-r2.gw-c2,.gw-r2.gw-c4{left:auto!important;right:-22vw!important}

  .gw-r1.gw-c1,.gw-r1.gw-c2{top:-2vh;top:-2svh}
  .gw-r1.gw-c3,.gw-r1.gw-c4{top:48vh;top:48svh}
  .gw-r2.gw-c1,.gw-r2.gw-c2{top:98vh;top:98svh}
  .gw-r2.gw-c3,.gw-r2.gw-c4{top:148vh;top:148svh}
  .gw-card{
    border-radius:18px;
    border-color:rgba(23,32,46,.07);
    background:#f2f4f7;
    box-shadow:0 12px 30px rgba(45,55,72,.13);
  }
  /* La mano se ancla POR ARRIBA tambien en movil. Anclada por `bottom` se
     apoyaba en el borde inferior del escenario: el telefono caia a media
     pantalla, el marco quedaba cortado por el canto y del brazo no se veia
     nada. Con `top` la composicion arranca dentro del encuadre y es el
     antebrazo —no el dispositivo— el que sale por abajo, como en la
     referencia. 104vw deja el telefono completo dentro del corredor en
     lugar de invadir las tarjetas de los lados.

     Este 29vh es la posicion de REPOSO, la del escenario ya anclado. Mientras
     la seccion entra, gallery-wall.js sube la mano hasta la linea donde
     arrancan las capturas para que muro y telefono aparezcan a la vez.
     Ojo: si se toca este valor, la entrada se recalcula sola (se lee del
     CSS en cada refresh).

     El clamp() tiene tres piezas y cada una tapa un fallo distinto:

     - 40vh es la posicion buscada. Cuanto mas abajo esta la mano, mas arriba
       corta el canto inferior de la pantalla: a 29vh el borde cortaba el
       antebrazo por la punta (63px de brazo a la vista, pegados a la esquina
       derecha) y a 40vh lo corta por la parte ancha (95px, ya despegado de
       la esquina).
     - El minimo (102vh - 146.5vw) obliga a que el brazo llegue al borde. El
       alto de la mano sale del ANCHO (104vw x 1.43 = 148.7vw, y el brazo
       acaba en el 98.5% de la imagen = 146.5vw) y el de la pantalla no, asi
       que en un movil muy estrecho y largo la mano acababa en el aire a
       media pantalla.
     - El maximo (92vh - 91.5vw) protege el otro extremo: en pantallas bajas
       40vh dejaba el marco del telefono rozando el canto. Lo sube lo justo
       para que el dispositivo termine al 92% de la pantalla. */
  .gw-hand{
    left:50%;
    top:clamp(102vh - 146.5vw, 40vh, 92vh - 91.5vw);
    bottom:auto;
    width:104vw;
    filter:drop-shadow(0 22px 34px rgba(45,55,72,.24));
  }
}

@media(max-width:360px){
  .gallery-wall{min-height:1400px;--gw-w:49vw}
  .gw-r1.gw-c1,.gw-r1.gw-c3,
  .gw-r2.gw-c1,.gw-r2.gw-c3{left:-23vw!important}
  .gw-r1.gw-c2,.gw-r1.gw-c4,
  .gw-r2.gw-c2,.gw-r2.gw-c4{right:-23vw!important}
  /* Sin override propio: 104vw y 29vh ya son relativos al viewport, asi que
     la mano conserva la misma proporcion en pantallas mas estrechas. */
}

/* --------------------------------------------------------------------------
   MOVIMIENTO REDUCIDO: sin recorrido. Se ve una sola pantalla de la escena,
   quieta, con la mano centrada.
   -------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .gallery-wall{height:100vh;height:100svh}
  .gw-track{will-change:auto;transform:none!important}
  .gw-hand{will-change:auto}
}