/* Chaquetas: TF Phantom en sus 3 colores. Mismo patrón de pin+scrub por
 * scroll que galeria.css (mismo remapeo con hold más largo en el centro,
 * mismos velos y fotos — se reusan tal cual (clases galeria-velo, galeria-
 * fotos, galeria-foto), sin redefinirlos aquí), pero el video corta en seco
 * de un color a otro en vez de deslizar: por eso el texto no sube por
 * máscara como en la galería, sino que "enfoca" — arranca borroso, un poco
 * más grande y casi transparente, y se enfoca de golpe (nítido, tamaño
 * real, opacidad 1) cuando la prenda llega al centro. Es un bloque entero
 * haciendo foco, no una cortina subiendo línea por línea.
 */

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

.chaquetas-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  /* funde la costura con la galería (arriba) y con la sección siguiente
     (abajo) — mismos valores que .galeria-sticky, por consistencia */
  box-shadow:
    inset 0 110px 110px -90px rgba(0, 0, 0, .92),
    inset 0 -110px 110px -90px rgba(0, 0, 0, .92);
}

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

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

/* ---------- ficha: enfoque de cámara, no máscara ---------- */

.chaquetas-datos {
  opacity: 0;
  filter: blur(14px);
  transition:
    opacity .5s ease,
    filter .6s ease,
    transform .6s cubic-bezier(.22, 1, .36, 1);
}

.chaquetas-datos.activa {
  opacity: 1;
  filter: blur(0);
}

/* el bloque entero ya anima con el enfoque; se anula el translateY por
   línea que .coleccion-ficha-modelo/precio heredan de coleccion.css (pensado
   para la galería) para que no se sumen dos coreografías distintas sobre el
   mismo texto */
.chaquetas-datos .coleccion-ficha-modelo span,
.chaquetas-datos .coleccion-ficha-precio span {
  transform: none;
  transition: none;
}

.chaquetas-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: .72;
}

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

.chaquetas-desc {
  margin: .9rem 0 0;
  max-width: 34ch;
  font-size: clamp(.85rem, 1.1vw, .95rem);
  line-height: 1.55;
  color: var(--texto);
  opacity: .72;
}

/* ---------- escritorio: ficha a la izquierda, vertical centrada ---------- */

@media (min-width: 700px) {
  .chaquetas-datos {
    /* pisa left/right/bottom/padding/background/text-align de
       .coleccion-ficha, igual que .galeria-datos */
    left: var(--margen);
    right: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%) scale(1.08);
    align-items: flex-start;
    text-align: left;
    max-width: min(86vw, 26rem);
    padding: 0;
    background: none;
  }

  .chaquetas-datos.activa {
    transform: translateY(-50%) scale(1);
  }
}

/* ---------- móvil: mismo recuadro cuadrado y ficha abajo que .galeria ---------- */

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

  .chaquetas-datos {
    position: absolute;
    left: 0;
    right: 0;
    top: 100vw;
    bottom: auto;
    transform: scale(1.08);
    align-items: center;
    text-align: center;
    max-width: 100%;
    padding: 1.6rem var(--margen) 2rem;
    background: none;
  }

  .chaquetas-datos.activa {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chaquetas-datos {
    transition: none;
  }
}