/* Galería: scrub por scroll sobre un solo video (canvas + frames webp), igual
   que el hero. Tres prendas se turnan en el centro; la ficha de cada una
   reusa las clases de .coleccion-ficha (modelo/precio/tallas/agregar) para
   heredar su coreografía de entrada y los handlers de coleccion.js — aquí
   solo se agregan las piezas que esa ficha no tenía: kicker, descripción,
   posición a la izquierda en vez de abajo, y las fotos flotantes a la
   derecha. */

.galeria {
  /* igual que #hero: la altura es la que define cuánto dura el scrub */
  height: 450vh;
  position: relative;
  background: var(--negro);
}

.galeria-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  /* Funde la costura con el hero (arriba) y con la sección siguiente
     (abajo): mismo recurso que .coleccion-panel en coleccion.css. Sin esto,
     el cambio de una sección pineada a la otra se corta de golpe en el
     mismo frame de scroll y se nota como una línea recta — "de cuadrícula",
     que es justo lo que no se quiere en este sitio. */
  box-shadow:
    inset 0 110px 110px -90px rgba(0, 0, 0, .92),
    inset 0 -110px 110px -90px rgba(0, 0, 0, .92);
}

#galeria-canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--negro);
}

/* ---------- velos: oscurecen y desenfocan los bordes para que texto y
   fotos sean legibles sobre el video, siempre encendidos (no dependen del
   scroll, a diferencia del resplandor de .coleccion) ---------- */

.galeria-velo {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(240px, 34vw, 560px);
  pointer-events: none;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.galeria-velo-izq {
  left: 0;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, .78) 0%,
    rgba(0, 0, 0, .5) 50%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(to right, #000 55%, transparent 100%);
  mask-image: linear-gradient(to right, #000 55%, transparent 100%);
}

.galeria-velo-der {
  right: 0;
  background: linear-gradient(
    to left,
    rgba(0, 0, 0, .78) 0%,
    rgba(0, 0, 0, .5) 50%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(to left, #000 55%, transparent 100%);
  mask-image: linear-gradient(to left, #000 55%, transparent 100%);
}

/* En móvil el video deja de ocupar la pantalla completa (ver @media de más
   abajo: el canvas pasa a un recuadro cuadrado arriba) y el velo lateral no
   tiene nada que oscurecer — se reemplaza por uno abajo, pegado al borde
   inferior de ese recuadro, que es donde cae la ficha. Oculto por defecto;
   el @media lo prende y apaga los laterales. */
.galeria-velo-abajo {
  display: none;
  left: 0;
  right: 0;
  top: 100vw; /* arranca justo donde termina el recuadro cuadrado del video */
  bottom: 0;
  width: auto;
  height: auto;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, .85) 0%,
    rgba(0, 0, 0, .55) 55%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(to top, #000 55%, transparent 100%);
  mask-image: linear-gradient(to top, #000 55%, transparent 100%);
}

/* ---------- producto: contenedor transparente, solo pasa el click a los
   hijos activos ---------- */

.galeria-producto {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ---------- ficha: en móvil hereda tal cual la posición de .coleccion-ficha
   (abajo, centrada, con su propio degradado) — es lo que se pidió: "las
   letras abajo de la animación". Solo en escritorio se levanta a la
   izquierda, vertical centrada, para dejar sitio a las fotos de la derecha. ---------- */

@media (min-width: 700px) {
  .galeria-datos {
    /* pisa left/right/bottom/padding/background/text-align de
       .coleccion-ficha: esta regla pesa igual (una sola clase) y carga
       después en el <head>, así que gana por orden sin tocar coleccion.css */
    left: var(--margen);
    right: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    align-items: flex-start;
    text-align: left;
    max-width: min(86vw, 26rem);
    padding: 0;
    background: none;
  }
}

.galeria-kicker {
  margin: 0 0 .9rem;
  font-family: var(--display);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--hueso);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}

.galeria-kicker i { font-style: normal; opacity: .5; margin: 0 .4em; }

.galeria-datos.activa .galeria-kicker {
  opacity: .72;
  transform: translateY(0);
}

.galeria-desc {
  margin: .9rem 0 0;
  max-width: 34ch;
  overflow: hidden; /* mascara: el span de adentro sube desde abajo */
}

.galeria-desc span {
  display: block;
  font-size: clamp(.85rem, 1.1vw, .95rem);
  line-height: 1.55;
  color: var(--texto);
  opacity: .72;
  transform: translateY(115%);
  transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}

.galeria-datos.activa .galeria-desc span {
  transform: translateY(0);
  transition-delay: .1s;
}

/* ---------- fotos derecha: cuadros vacíos, a la espera de fotografía real de
   producto. Flotan todo el tiempo; solo su aparición depende del scroll. ---------- */

.galeria-fotos {
  position: absolute;
  right: var(--margen);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  pointer-events: none;
}

.galeria-foto {
  display: block;
  width: clamp(56px, 7vw, 92px);
  height: clamp(56px, 7vw, 92px);
  border: 1px solid rgba(242, 239, 233, .22);
  background: rgba(242, 239, 233, .05);
  opacity: 0;
  transition: opacity .5s ease;
  animation: galeria-flotar 5s ease-in-out infinite;
}

.galeria-fotos.activa .galeria-foto { opacity: 1; }

.galeria-fotos.activa .galeria-foto:nth-child(1) { transition-delay: .1s; animation-delay: 0s; }
.galeria-fotos.activa .galeria-foto:nth-child(2) { transition-delay: .18s; animation-delay: .7s; }
.galeria-fotos.activa .galeria-foto:nth-child(3) { transition-delay: .26s; animation-delay: 1.4s; }

@keyframes galeria-flotar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ---------- móvil: el video ya no llena la pantalla (ahí el recorte
   "cover" se iba al 26% del ancho del cuadro y se comía las luces) — pasa a
   un recuadro cuadrado arriba, que con el mismo cover solo recorta hasta un
   ~56% del ancho y las deja ver completas. La ficha va justo debajo, en vez
   de superpuesta encima: es "cover" normal de .galeria-canvas, no un cálculo
   aparte en JS, así que pintarCover no necesita saber de móvil. ---------- */

@media (max-width: 699px) {
  #galeria-canvas {
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .galeria-velo-izq,
  .galeria-velo-der { display: none; }

  .galeria-velo-abajo { display: block; }

  .galeria-datos {
    position: absolute;
    left: 0;
    right: 0;
    top: 100vw; /* justo debajo del recuadro cuadrado del video */
    bottom: auto;
    transform: none;
    align-items: center;
    text-align: center;
    max-width: 100%;
    padding: 1.6rem var(--margen) 2rem;
    background: none; /* el degradado ya lo pone .galeria-velo-abajo */
  }

  /* en vez de apagarse, pasan de columna a la derecha a fila horizontal,
     superpuestas al propio video (el orden del DOM ya las pinta encima del
     canvas) y pegadas al borde inferior del recuadro cuadrado — más abajo
     que el bajo de la prenda, en la franja de piso/sombra, para que no se
     encimen con la camiseta */
  .galeria-fotos {
    left: 0;
    right: 0;
    top: calc(100vw - 30px);
    bottom: auto;
    transform: none;
    flex-direction: row;
    justify-content: center;
    gap: .5rem;
  }

  .galeria-foto {
    width: 28px;
    height: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .galeria-kicker,
  .galeria-desc span,
  .galeria-foto {
    transition: none;
    animation: none;
  }
}