/* ==========================================================
   GALERÍA · carrusel "cover flow" estilo cartel de pelea
   (js/galeria.js). La slide activa va centrada y a color; las
   vecinas al 80 %, opacidad .55, giradas ±2° y en blanco y negro.
   Todo el movimiento es transform / opacity (lo fija el JS).
   ========================================================== */

.galeria { --gal-h: 520px; --gal-sombra: 10px; position: relative; }

/* Pista: scroll nativo con snap al centro (dedo, rueda horizontal, inercia).
   --pad-ini / --pad-fin (JS) permiten centrar la primera y la última slide. */
.galeria-track {
  position: relative;
  display: flex;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 20px var(--pad-fin, 0px) 36px var(--pad-ini, 0px);
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.galeria-track::-webkit-scrollbar { display: none; }
.galeria-track:focus-visible { outline-offset: -3px; }
.galeria-track.is-dragging { scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.galeria-track.sin-snap { scroll-snap-type: none; }
.galeria-track.sin-transicion * { transition: none !important; }   /* salto clon → real del bucle */
.galeria-track.sin-transicion *:after { transition: none !important; }
.galeria-track.has-cursor { cursor: none; }
.galeria-track.has-cursor button { cursor: pointer; }

/* Slide: alto fijo, ancho según la proporción del archivo (--ratio, JS) */
.galeria-slide {
  position: relative;
  flex: none;
  height: var(--gal-h);
  aspect-ratio: var(--ratio, 4 / 5);
  margin: 0;
  scroll-snap-align: center;
  transform-origin: center;
  will-change: transform, opacity;
}
.galeria-slide + .galeria-slide { margin-left: 24px; }

.galeria-marco {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--color-surface);
  border: 2px solid var(--color-silver);
  box-shadow: var(--gal-sombra) var(--gal-sombra) 0 var(--color-accent);
  transition: border-color .6s var(--ease);
}
.galeria-slide.is-active .galeria-marco { border-color: var(--color-cream); }

/* 40 px más ancha que el marco: margen para el parallax interno (±20 px) */
.galeria-media {
  position: absolute;
  top: 0;
  left: -20px;
  width: calc(100% + 40px);
  height: 100%;
  display: block;
  object-fit: cover;
  filter: grayscale(1) contrast(1.3);
  transition: filter .6s var(--ease);
  user-select: none;
  -webkit-user-drag: none;
}
.galeria-slide.is-active .galeria-media { filter: none; }

/* Tinte rojo sutil sobre las no activas */
.galeria-marco:after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  mix-blend-mode: multiply;
  opacity: .25;
  pointer-events: none;
  transition: opacity .6s var(--ease);
}
.galeria-slide.is-active .galeria-marco:after { opacity: 0; }

/* Etiqueta de disciplina (como el badge del 2x1) */
.galeria-etiqueta {
  position: absolute;
  top: 14px;
  left: -8px;
  z-index: 2;
  background: var(--color-yellow);
  color: var(--color-black);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .35em .9em;
  transform: skewX(-8deg);
  pointer-events: none;
}

/* Botón de pausa / reproducir de cada video */
.galeria-play {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--color-caption-bg);
  border: 1px solid var(--color-silver);
  cursor: pointer;
}
.galeria-play svg { width: 18px; height: 18px; fill: var(--color-cream); }
.galeria-play:hover { border-color: var(--color-cream); }

/* Cursor personalizado (solo con ratón): lo crea y mueve el JS.
   Sin margen negativo: su esquina va en el puntero, así el círculo de 56 px
   queda 28 px a la derecha y 28 px abajo y no tapa lo que se señala. */
.galeria-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 150;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-round);
  background: var(--color-accent);
  box-shadow: 3px 3px 0 var(--color-black);
  color: var(--color-cream);
  font: 400 .6rem/1 var(--font-title);
  letter-spacing: .03em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  scale: .5;
  transition: opacity .2s, scale .25s var(--ease);
}
.galeria-cursor.is-visible { opacity: 1; scale: 1; }
.galeria-cursor.is-visible.is-pressed { scale: .85; }

/* Indicadores: ROUND 03 / 07 · barra de progreso · flechas */
.galeria-indicadores { display: flex; align-items: center; gap: 24px; margin-top: 4px; }
.galeria-contador { display: flex; align-items: baseline; gap: .6rem; margin: 0; white-space: nowrap; }
.galeria-contador-round { font-weight: 600; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--color-accent-text); }
.galeria-contador-num { display: inline-block; font: 400 3.2rem/1 var(--font-title); color: var(--color-cream); transform: skewX(-8deg); }
.galeria-contador-total { font: 400 1.5rem/1 var(--font-title); color: var(--color-silver); }

.galeria-progreso { position: relative; flex: 1; height: 3px; background: var(--color-line); overflow: hidden; }
.galeria-progreso span {
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform .6s var(--ease);
}

/* Flechas y cerrar: botones cuadrados del sistema (rojo + sombra dura) */
.galeria-flecha,
.galeria-lightbox-cerrar {
  flex: none;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--color-accent);
  border: 2px solid var(--color-accent);
  box-shadow: var(--shadow-btn);
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), opacity .25s;
}
.galeria-flecha svg,
.galeria-lightbox-cerrar svg { width: 22px; height: 22px; stroke: var(--color-cream); fill: none; stroke-width: 3; stroke-linecap: square; }
.galeria-flecha:hover,
.galeria-lightbox-cerrar:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-btn-hover); }
.galeria-flecha:active,
.galeria-lightbox-cerrar:active { transform: translate(4px, 4px); box-shadow: var(--shadow-btn-active); }
.galeria-flecha:disabled { opacity: .35; cursor: default; transform: none; box-shadow: var(--shadow-btn); }

/* Pantalla completa */
.galeria-lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
  color: var(--color-silver);
}
.galeria-lightbox::backdrop { background: rgba(10, 10, 10, .95); } /* --color-bg al 95 % */
.galeria-lightbox-escena {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 112px 96px;
}
.galeria-lightbox-media {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  background: var(--color-surface);
  border: 2px solid var(--color-cream);
  box-shadow: 10px 10px 0 var(--color-accent);
}
.galeria-lightbox-pie {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 28px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  pointer-events: none;
}
.galeria-lightbox-pie .galeria-etiqueta { position: static; }
.galeria-lightbox-num { font: 400 1.5rem/1 var(--font-title); color: var(--color-cream); }
.galeria-lightbox-cerrar { position: absolute; top: 16px; right: 16px; }
.galeria-lightbox-prev,
.galeria-lightbox-next { position: absolute; top: calc(50% - 24px); }
.galeria-lightbox-prev { left: 32px; }
.galeria-lightbox-next { right: 32px; }

/* Página quieta mientras la pantalla completa está abierta */
html.galeria-bloqueo { overflow: hidden; scrollbar-gutter: stable; }
html.galeria-bloqueo body { overflow: hidden; }

/* Móvil y tableta: slides de 420 px, sin flechas en el carrusel, la pista sangra
   hasta el borde y las vecinas se meten por debajo de la activa para asomar. */
@media (max-width: 899px) {
  .galeria { --gal-h: 420px; --gal-sombra: 8px; }
  .galeria-track { margin: 0 calc(var(--space-md) * -1); }
  .galeria-slide + .galeria-slide { margin-left: -40px; }
  /* vecinas más luminosas para que se reconozca el contenido (la activa sigue a color) */
  .galeria-media { filter: grayscale(1) contrast(1.3) brightness(1.4); }
  .galeria-indicadores .galeria-flecha { display: none; }
  .galeria-contador-num { font-size: 2.6rem; }
  .galeria-lightbox-escena { padding: 72px 16px 96px; }
  .galeria-lightbox-prev,
  .galeria-lightbox-next { top: auto; bottom: 20px; }
  .galeria-lightbox-prev { left: 16px; }
  .galeria-lightbox-next { right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .galeria-marco:after, .galeria-cursor { transition: none !important; } /* el * del reset no alcanza a los pseudo-elementos */
}