/* Galería — movimiento `galeria-autoplay` (ver MOTION.md).
 *
 * La mecánica es la de oryzo: una ventana fija en el centro que recorta, la tira de tarjetas
 * grandes deslizándose adentro (sin separación, así el corte entre una y otra es un borde y no
 * un hueco), y una sola fila de miniaturas que cruza la pantalla por detrás del marco. Todo se
 * mueve del mismo índice continuo, así que nada "salta": la miniatura que está detrás del marco
 * es siempre la tarjeta que se está viendo.
 *
 * Dos modos con el mismo HTML:
 *   pin  — escritorio y teléfono: la sección es alta, la etapa queda pegada y el scroll vertical
 *          corre la tira. Lo maneja assets/js/galeria.js. En teléfono cambia la composición (ver
 *          el bloque de max-width 820px), no la mecánica.
 *   tira — reduced-motion y sin GSAP: scroll horizontal nativo con snap, sin pin.
 *
 * La tarjeta es siempre 3:4 y el recorte ya viene hecho desde tools/galeria: acá nadie deforma
 * nada. El tamaño sale de la altura disponible, no del ancho: en cualquier pantalla entra
 * entera y las miniaturas ocupan lo que sobra.
 */

.galeria {
  --paso: 62vh;                                   /* recorrido de scroll por tarjeta */
  --margen: clamp(1rem, 3vw, 3.5rem);
  /* 80 % del alto útil: es la proporción medida en la referencia (475x614 en una ventana de
     768). La ficha no va debajo sino a la izquierda, justamente para poder darle ese tamaño. */
  --tarjeta-alto: min(80svh, 61vw);
  --tarjeta: calc(var(--tarjeta-alto) * 0.75);
  --mini-alto: calc(var(--tarjeta-alto) * 0.27);
  --mini-gap: clamp(6px, 0.7vw, 10px);
  --linea: rgba(212, 175, 55, 0.35);
  position: relative;
  height: calc(100svh + var(--n) * var(--paso));
  /* De borde a borde: la sección tiene padding, la cinta de miniaturas no lo respeta.
     El body ya lleva overflow-x hidden, así que 100vw no agrega barra horizontal. */
  width: 100vw; margin-left: calc(50% - 50vw);
}

.galeria__etapa { background: var(--blanco-calido); }

/* La etapa es una columna: el espacio de la nav arriba, el campo (que se estira) y la pista
   de scroll abajo. Así la tarjeta ocupa todo lo que hay y nada se superpone con nada, en
   cualquier alto de ventana. */
/* Los 0.8rem de más son lo que el marco sobresale por arriba de la caja: sin ellos, las
   escuadras de arriba quedaban 5 px debajo de la nav fija del sitio y se perdía su trazo
   horizontal (en _galeria.html no hay nav y no se notaba). */
.galeria__etapa { display: flex; flex-direction: column; padding-top: calc(var(--nav-h) + 1vh + 0.8rem); }
.galeria__campo {
  position: relative; flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center;
}

/* Tira de miniaturas: una sola fila, ancho libre, centrada en la tarjeta. Pasa por detrás
   del marco (z-index 0 contra 1): eso es lo que hace que se lea como una sola cinta. */
.galeria__tira {
  position: absolute; left: 0; top: 50%; z-index: 0;
  display: flex; gap: var(--mini-gap); height: var(--mini-alto);
  /* El centro óptico es el de la tarjeta, no el del campo: hay que descontar la ficha
     (que empuja la tarjeta hacia arriba) y la mitad de la propia cinta. */
  margin-top: calc(var(--mini-alto) * -0.5);
  will-change: transform;
}
.galeria__tira button {
  padding: 0; border: 0; background: none; line-height: 0; cursor: pointer; height: 100%;
  opacity: 0.78; transition: opacity 0.4s var(--ease-out-expo);
}
.galeria__tira img { height: 100%; width: auto; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.galeria__tira button:hover { opacity: 1; }
.galeria__tira button:focus-visible { outline: 2px solid var(--dorado); outline-offset: 3px; opacity: 1; }

/* Caja: marco + ventana. Es lo único que va encima de la tira. */
.galeria__caja { position: relative; z-index: 1; height: 100%; display: flex; align-items: center; justify-content: center; }

.galeria__ventana {
  /* La altura la manda el campo: la tarjeta es tan grande como entre sin empujar nada. */
  height: min(var(--tarjeta-alto), 100%); aspect-ratio: 3 / 4; width: auto;
  overflow: hidden; position: relative;
  background: var(--negro-escena-soft);
}

/* Marco: cuatro escuadras doradas alrededor de la ventana. Encierra sin encajonar. */
.galeria__marco { position: absolute; inset: -0.8rem; pointer-events: none; }
.galeria__marco i { position: absolute; width: clamp(14px, 1.6vw, 24px); height: clamp(14px, 1.6vw, 24px); }
.galeria__marco i:nth-child(1) { top: 0; left: 0; border-top: 1px solid var(--linea); border-left: 1px solid var(--linea); }
.galeria__marco i:nth-child(2) { top: 0; right: 0; border-top: 1px solid var(--linea); border-right: 1px solid var(--linea); }
.galeria__marco i:nth-child(3) { bottom: 0; left: 0; border-bottom: 1px solid var(--linea); border-left: 1px solid var(--linea); }
.galeria__marco i:nth-child(4) { bottom: 0; right: 0; border-bottom: 1px solid var(--linea); border-right: 1px solid var(--linea); }

/* Sin gap entre tarjetas: adentro de la ventana el paso de una a otra es un borde limpio.
   Cada tarjeta recorta lo suyo (`overflow: hidden` en el item) y adentro gira la caja de la
   imagen: eso es lo que hace el movimiento de la referencia — la imagen gira, pero solo se ve
   lo que queda dentro del rectángulo. Medido en oryzo, no deducido. */
.galeria__pista { position: absolute; left: 0; top: 0; display: flex; gap: 0; height: 100%; width: 100%; will-change: transform; }
.galeria__item { flex: 0 0 100%; margin: 0; height: 100%; position: relative; overflow: hidden; }
.galeria__inner { position: relative; width: 100%; height: 100%; }
/* Sin `will-change` acá a propósito: son doce imágenes y solo tres se ven. Promoverlas todas
   deja doce texturas de GPU vivas (unos 19 MB en una integrada) y eso se paga en cuadros
   trabados. La promoción la pone y la saca galeria.js, tarjeta por tarjeta. */
.galeria__medio { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Sello "Video": dice qué tarjetas se mueven antes de que se muevan. */
.galeria__sello {
  position: absolute; left: 0.8rem; top: 0.8rem;
  font-family: var(--font-support); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dorado); background: rgba(13, 13, 13, 0.45); border: 1px solid rgba(212, 175, 55, 0.35);
  padding: 0.2rem 0.55rem; border-radius: var(--radius-pill);
}

/* Botón de play: solo en nivel estático, donde nada arranca solo. */
.galeria__play { display: none; }
html[data-motion="estatico"] .galeria__play {
  display: grid; place-items: center; position: absolute; inset: 0; width: 100%; height: 100%;
  background: rgba(13, 13, 13, 0.3); border: 0; cursor: pointer;
}
html[data-motion="estatico"] .galeria__play span {
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  border: 1px solid var(--dorado); background: rgba(13, 13, 13, 0.6);
}
html[data-motion="estatico"] .galeria__play span::after {
  content: ''; display: block; margin: 1.05rem 0 0 1.35rem;
  border-left: 0.85rem solid var(--dorado); border-top: 0.55rem solid transparent; border-bottom: 0.55rem solid transparent;
}
.galeria__item.esta-sonando .galeria__play { display: none; }

/* Pie de tarjeta: manda en modo tira. En modo pin lo reemplaza la ficha. */
.galeria__pie { padding: 0.9rem 0.1rem 0; }
.galeria__num { font-family: var(--font-support); font-size: 0.72rem; letter-spacing: 0.18em; color: var(--ink-muted-on-light); }
.galeria__pie h3 { font-size: 1.2rem; color: var(--ink-on-light); margin: 0.15rem 0 0.1rem; }
.galeria__pie p { font-size: 0.85rem; color: var(--ink-muted-on-light); margin: 0; }

/* Ficha: el dato de la tarjeta que se está viendo. Va a la izquierda y arriba de la cinta,
   como el texto de sección de la referencia; abajo no entra sin robarle alto a la tarjeta. */
.galeria__ficha {
  position: absolute; left: var(--margen); top: 6%; z-index: 2; text-align: left;
  /* Nunca más ancha que el hueco que deja la tarjeta: si no, en 1024 se le monta encima. */
  width: min(20rem, calc(50vw - var(--tarjeta) * 0.5 - var(--margen) * 2));
}
.galeria__contador { font-family: var(--font-support); font-size: 0.72rem; letter-spacing: 0.2em; color: var(--ink-muted-on-light); margin: 0 0 0.35rem; }
.galeria__contador span { color: var(--dorado); }
.galeria__texto h3 { font-size: clamp(1.1rem, 0.8rem + 0.85vw, 1.7rem); color: var(--ink-on-light); line-height: 1.15; }
.galeria__texto p { font-size: 0.82rem; letter-spacing: 0.05em; color: var(--ink-muted-on-light); margin: 0.25rem 0 0; }
.galeria__texto h3, .galeria__texto p { overflow: hidden; }
.galeria__texto span { display: inline-block; }
.galeria__barra { width: 100%; height: 1px; margin-top: 1.1rem; background: rgba(13, 13, 13, 0.12); }
.galeria__barra span { display: block; height: 100%; background: var(--dorado); transform: scaleX(0); transform-origin: left; }

/* Pista de scroll: el chevron cae y se desvanece, como en la referencia. Es la única
   animación de la sección que no depende del scroll; en reduced-motion queda quieta. */
.galeria__pista-scroll {
  flex: 0 0 auto; align-self: center; margin: 0 0 1.6vh;
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-support); font-size: 0.72rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-muted-on-light); white-space: nowrap;
}
.galeria__chevron {
  width: 1.55rem; height: 1.55rem; border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.45);
  display: grid; place-items: center; overflow: hidden;
}
.galeria__chevron::after {
  content: ''; width: 0.42rem; height: 0.42rem; margin-top: -0.12rem;
  border-right: 1px solid var(--dorado); border-bottom: 1px solid var(--dorado);
  transform: rotate(45deg);
  animation: galeria-chevron 1.9s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes galeria-chevron {
  0%   { transform: translateY(-0.32rem) rotate(45deg); opacity: 0; }
  35%  { opacity: 1; }
  70%  { transform: translateY(0.3rem) rotate(45deg); opacity: 0; }
  100% { transform: translateY(0.3rem) rotate(45deg); opacity: 0; }
}
html[data-motion="estatico"] .galeria__chevron::after { animation: none; transform: rotate(45deg); opacity: 1; }

/* ---- Modo tira: móvil y reduced-motion. Sin pin, scroll horizontal nativo ---- */
.galeria--tira { height: auto; }
.galeria--tira .galeria__etapa { position: static; height: auto; overflow: visible; }
.galeria--tira .galeria__campo { position: static; inset: auto; display: block; }
.galeria--tira .galeria__tira, .galeria--tira .galeria__marco, .galeria--tira .galeria__ficha,
.galeria--tira .galeria__pista-scroll { display: none; }
.galeria--tira .galeria__caja { display: block; }
.galeria--tira .galeria__ventana { width: auto; height: auto; overflow: visible; background: none; }
.galeria--tira .galeria__pista {
  position: static; transform: none; will-change: auto; height: auto;
  gap: clamp(0.8rem, 3vw, 1.5rem);
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  padding: 0 calc(50% - var(--tarjeta) * 0.5) 0.5rem;
  scrollbar-width: none;
}
.galeria--tira .galeria__pista::-webkit-scrollbar { display: none; }
.galeria--tira .galeria__item { scroll-snap-align: center; height: auto; }
.galeria--tira .galeria__inner { aspect-ratio: 3 / 4; height: auto; transform: none !important; }
.galeria--tira .galeria__item { overflow: visible; }
.galeria--tira .galeria__caja { height: auto; display: block; }
.galeria--tira .galeria__etapa { display: block; padding-top: 0; }

@media (max-width: 820px) {
  .galeria { --tarjeta-alto: min(62svh, 104vw); }
}

/* ---- Modo pin en teléfono (Axel, 17/09: "quiero el mismo efecto en mobile") ----
   Misma mecánica que en escritorio; cambia solo dónde va cada cosa, porque a la izquierda de la
   tarjeta no hay lugar para la ficha. Columna, de arriba abajo: nav, marco con la tarjeta y la
   cinta cruzando por detrás, ficha centrada debajo, y una fila de abajo con la pista de scroll
   alineada al botón flotante de música. Tarjeta y ficha forman un grupo centrado en el alto que
   queda, así el aire de arriba y el de abajo son iguales.
   Todo lo que ocupa alto está en variables y el alto de la tarjeta sale de una cuenta, no de un
   porcentaje: la ficha tiene alto fijo y sus textos no cortan línea, así que cambiar de tarjeta
   nunca mueve la tarjeta. Los números se eligieron comparando capturas en 390x844 y se verifican
   en 390x844, 360x740 y 767x1024 (tools/galeria/bin/verificar-movil.mjs); están en MOTION.md. */
@media (max-width: 820px) {
  .galeria:not(.galeria--tira) {
    --paso: 55vh;
    --margen: 1.25rem;
    /* 76vw: a 80vw la cinta asomaba 39 px por lado y se leía como dos rayas de color; a 72vw la
       tarjeta perdía un 10 % sin ganar nada que se vea. A 76vw asoman 47 px, media miniatura. */
    --tarjeta-ancho: 76vw;
    --etapa-arriba: calc(var(--nav-h) + 0.8rem + 1.5vh);   /* nav + lo que sobresale el marco + aire */
    --ficha-gap: 2rem;                                       /* del borde de la tarjeta a la ficha */
    /* contador 18 + título 24 + bajada 21 + barra 15, más 8 px de resto: sin ese resto la barra de
       1 px caía en el último píxel fraccionario de la ficha y el recorte la borraba */
    --ficha-alto: 6rem;
    /* Fila de abajo: tiene que ser más alta que el botón de música (3.1rem + 0.75rem de su margen,
       64 px) para que la ficha nunca quede a su altura. */
    --pista-alto: 4.5rem;
    --tarjeta-alto: min(
      calc(var(--tarjeta-ancho) * 4 / 3),
      calc(100svh - var(--etapa-arriba) - var(--ficha-gap) - var(--ficha-alto) - var(--pista-alto) - 1rem)
    );
    --mini-gap: 6px;
  }
  .galeria:not(.galeria--tira) .galeria__etapa { padding-top: var(--etapa-arriba); }
  .galeria:not(.galeria--tira) .galeria__campo {
    flex-direction: column; justify-content: center; gap: var(--ficha-gap);
    /* el gesto vertical es del navegador (scroll nativo); el de costado lo toma galeria.js */
    touch-action: pan-y;
  }
  .galeria:not(.galeria--tira) .galeria__caja { height: auto; flex: 0 0 auto; }
  .galeria:not(.galeria--tira) .galeria__ventana { height: var(--tarjeta-alto); }
  /* La cinta cruza por el centro de la tarjeta, no del campo: el grupo lleva la ficha debajo. */
  .galeria:not(.galeria--tira) .galeria__tira { top: calc(50% - (var(--ficha-gap) + var(--ficha-alto)) / 2); }
  /* Miniaturas en su 3:4 y sin encogerse. Sin esto el flex las aprieta para que las doce entren en
     el ancho de la pantalla: en 390 quedaban de 27x112, rayas en vez de fotos. */
  .galeria:not(.galeria--tira) .galeria__tira button { flex: 0 0 auto; width: calc(var(--mini-alto) * 0.75); }
  .galeria:not(.galeria--tira) .galeria__tira img { width: 100%; }
  .galeria:not(.galeria--tira) .galeria__ficha {
    position: relative; left: auto; top: auto; flex: 0 0 auto;
    width: calc(100% - var(--margen) * 2); height: var(--ficha-alto); overflow: hidden;
    text-align: center;
  }
  .galeria:not(.galeria--tira) .galeria__texto h3 { font-size: 1.3rem; white-space: nowrap; }
  .galeria:not(.galeria--tira) .galeria__texto p { white-space: nowrap; }
  /* La barra mide lo mismo que la tarjeta y queda centrada debajo de ella. */
  .galeria:not(.galeria--tira) .galeria__barra { width: calc(var(--tarjeta-alto) * 0.75); margin: 0.9rem auto 0; }
  /* El centro de la pista queda a la altura del centro del botón de música (su margen + la mitad
     de sus 3.1rem), así la fila de abajo se lee como una sola línea y no como dos cosas sueltas. */
  .galeria:not(.galeria--tira) .galeria__pista-scroll {
    height: 1.55rem;
    margin: calc(var(--pista-alto) - 1.55rem - 1.525rem) 0 1.525rem;
  }
}
@media (min-width: 721px) and (max-width: 820px) {
  /* de 721 a 820 el botón de música va a 1rem del borde, no a 0.75rem */
  .galeria:not(.galeria--tira) .galeria__pista-scroll { margin: calc(var(--pista-alto) - 1.55rem - 1.775rem) 0 1.775rem; }
}

/* En modo pin el pie se esconde a la vista pero lo siguen leyendo los lectores de pantalla:
   la ficha es la misma información y está marcada aria-hidden para no duplicarla. */
.galeria:not(.galeria--tira) .galeria__pie {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}