/* ═══════════════════════════════════════════════════════════
   JOYERÍA GRIJALVA — galeria.css
   Lupa sobre la foto de la ficha y visor a pantalla completa.
   La maqueta la ponen producto.css y servicio-editorial.css; aquí solo va
   lo que las dos fichas comparten, enganchado a los atributos de datos que
   lee assets/js/galeria.js.
   ═══════════════════════════════════════════════════════════ */

/* ── Lupa: la foto crece dentro de su propio marco ───────── */

[data-gj-marco] {
  cursor: zoom-in;
}

/* La capa del aumento: la misma fotografía, en grande, pintada encima de la que
   ya está. Va aparte y no sobre el <img> porque cambiarle el `src` en caliente
   hacía que el navegador lo vaciara mientras decodificaba los 2000 px —la pieza
   parpadeaba justo al acercarse a mirarla—.

   `padding: inherit` + `content-box` la encajan exactamente sobre la foto: el
   marco tiene padding y la foto va en «contain», así que el punto que señala el
   cursor es el que se amplía. */
.gj-lupa-capa {
  position: absolute;
  inset: 0;
  padding: inherit;
  background-origin: content-box;
  /* Se posiciona sobre la foto pero se pinta hasta el borde del marco: el punto
     que señala el cursor es el que se amplía, y el aumento llena el marco en
     vez de dejar el padding a la vista. */
  background-clip: border-box;
  background-repeat: no-repeat;
  background-size: calc(var(--gj-lupa, 2.2) * 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s var(--ease-out);
}

[data-gj-marco].is-lupa .gj-lupa-capa {
  opacity: 1;
}

/* El aviso de que la foto se abre. Sobre la esquina de la pieza, en papel
   translúcido para no competir con el metal. */
.gj-lupa {
  position: absolute;
  right: clamp(8px, 1.5vw, 14px);
  bottom: clamp(8px, 1.5vw, 14px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--linea);
  border-radius: var(--r);
  background: rgba(255, 253, 248, .92);
  color: var(--tinta);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
  cursor: zoom-in;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out),
              border-color .2s var(--ease-out);
}

.gj-lupa:hover,
.gj-lupa:focus-visible {
  background: var(--vino);
  border-color: var(--vino);
  color: var(--blanco);
}

.gj-lupa:focus-visible {
  outline: 2px solid var(--dorado-dark);
  outline-offset: 2px;
}

/* Mientras la lupa está puesta el botón se aparta un poco, pero sigue vivo: es
   la esquina por la que hay que pasar para pulsarlo, y ocultarlo dejaba el
   único control visible del aumento fuera de alcance justo al acercarse. */
[data-gj-marco].is-lupa .gj-lupa {
  opacity: .8;
}

/* ── Carrusel: flechas y contador ────────────────────────── */
/* Los pinta assets/js/galeria.js sobre la pista, y solo cuando hay más de una
   toma. Con el dedo se pasa deslizando; esto es para quien mira con ratón, que
   no tiene gesto equivalente y necesita ver que la pieza tiene más lados. */

.gj-carrusel-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--linea);
  border-radius: 50%;
  background: rgba(255, 253, 248, .92);
  color: var(--tinta);
  cursor: pointer;
  /* Aparecen al acercarse a la pieza: en reposo la fotografía manda. */
  opacity: 0;
  transition: opacity .2s var(--ease-out), background-color .2s var(--ease-out),
              color .2s var(--ease-out), border-color .2s var(--ease-out);
}

.gj-carrusel-nav--prev { left: clamp(8px, 1.5vw, 14px); }
.gj-carrusel-nav--next { right: clamp(8px, 1.5vw, 14px); }

.producto__visor:hover .gj-carrusel-nav,
.gj-carrusel-nav:focus-visible {
  opacity: 1;
}

.gj-carrusel-nav:hover {
  background: var(--vino);
  border-color: var(--vino);
  color: var(--blanco);
}

.gj-carrusel-nav:focus-visible {
  outline: 2px solid var(--dorado-dark);
  outline-offset: 2px;
}

/* En la primera y en la última no hay a dónde ir: el botón se retira en vez de
   quedarse prometiendo una foto que no existe. */
.gj-carrusel-nav[hidden] { display: none; }

/* En táctil no hay cursor que las despierte y taparían la pieza: ahí manda el
   dedo, y el contador dice cuántas tomas quedan. */
@media (hover: none) {
  .gj-carrusel-nav { display: none; }
}

.gj-carrusel-contador {
  position: absolute;
  z-index: 2;
  left: clamp(8px, 1.5vw, 14px);
  bottom: clamp(8px, 1.5vw, 14px);
  margin: 0;
  padding: 6px 10px;
  border: 1px solid var(--linea);
  border-radius: var(--r);
  background: rgba(255, 253, 248, .92);
  color: var(--tinta-suave);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* ── Visor ───────────────────────────────────────────────── */

.gj-visor {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
  color: var(--marfil);
}

/* Neutro profundo y opaco, no vino: el fondo tiene que desaparecer para que
   quede la pieza. Translúcido dejaba leer el título de la ficha por detrás, y
   el acento de marca sobre una foto de oro la ensucia. */
.gj-visor::backdrop {
  background: var(--tinta, #1f1b17);
}

.gj-visor__lienzo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Los gestos los resuelve el JS (arrastre, pinza, doble toque); sin esto el
     navegador se lleva el táctil y el visor no responde. */
  touch-action: none;
}

.gj-visor__foto {
  max-width: min(94vw, 1400px);
  max-height: 86dvh;
  object-fit: contain;
  transform-origin: center center;
  cursor: zoom-in;
  opacity: 1;
  transition: opacity .2s var(--ease-out);
  /* Una fotografía se puede arrastrar fuera del navegador, y ese gesto nativo
     se comía el de desplazar la pieza ampliada. */
  -webkit-user-drag: none;
  user-select: none;
}

.gj-visor.is-cargando .gj-visor__foto {
  opacity: 0;
}

.gj-visor.is-ampliado .gj-visor__foto {
  cursor: grab;
}

/* Mientras se arrastra, la mano cerrada: es la única señal de que el gesto se
   está atendiendo. */
.gj-visor.is-arrastrando .gj-visor__foto {
  cursor: grabbing;
}

/* ── Controles ── */

/* Fondo propio, no transparente: al ampliar, la fotografía se mete debajo de
   los controles y un borde claro sobre una toma clara deja de verse. */
.gj-visor__cerrar,
.gj-visor__nav {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(246, 236, 217, .28);
  border-radius: var(--r);
  background: rgba(31, 27, 23, .62);
  color: var(--marfil);
  cursor: pointer;
  transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out);
}

.gj-visor__cerrar:hover,
.gj-visor__nav:hover,
.gj-visor__cerrar:focus-visible,
.gj-visor__nav:focus-visible {
  background: rgba(31, 27, 23, .88);
  border-color: var(--oro-suave);
}

.gj-visor__cerrar:focus-visible,
.gj-visor__nav:focus-visible {
  outline: 2px solid var(--oro-suave);
  outline-offset: 2px;
}

.gj-visor__cerrar {
  top: clamp(12px, 2vw, 24px);
  right: clamp(12px, 2vw, 24px);
  width: 44px;
  height: 44px;
}

.gj-visor__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 64px;
  font-family: var(--font-serif);
  font-size: 30px;
  line-height: 1;
  padding-bottom: 4px;
}

.gj-visor__nav--prev { left: clamp(8px, 2vw, 24px); }
.gj-visor__nav--next { right: clamp(8px, 2vw, 24px); }

.gj-visor--unica .gj-visor__nav { display: none; }

/* ── Pie: qué pieza es y cuántas fotos tiene ── */

.gj-visor__pie {
  position: absolute;
  left: 50%;
  bottom: clamp(12px, 2.5vw, 28px);
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 16px;
  max-width: min(92vw, 720px);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  color: rgba(246, 236, 217, .82);
}

.gj-visor__leyenda {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gj-visor__contador {
  flex: none;
  font-size: 11px;
  letter-spacing: .14em;
  color: rgba(246, 236, 217, .6);
}

.gj-visor__contador:empty {
  display: none;
}

/* Con la pieza ampliada el pie se retira: quien está mirando el engaste no
   necesita leer el nombre, y el texto quedaba escrito sobre la fotografía. */
.gj-visor__pie {
  transition: opacity .2s var(--ease-out);
}

.gj-visor.is-ampliado .gj-visor__pie {
  opacity: 0;
  pointer-events: none;
}

/* En pantalla estrecha las flechas bajan a la fila del pie. A los lados se
   comían el borde de la fotografía —que ahí ocupa casi todo el ancho— y en el
   móvil se pasa de foto deslizando, no pulsando. */
@media (max-width: 600px) {
  .gj-visor__foto {
    max-height: 74dvh;
  }

  .gj-visor__nav {
    top: auto;
    bottom: clamp(8px, 2vw, 16px);
    transform: none;
    width: 44px;
    height: 40px;
    font-size: 24px;
  }

  .gj-visor__leyenda {
    max-width: 48vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gj-lupa-capa,
  .gj-visor__foto,
  .gj-visor__pie,
  .gj-lupa {
    transition: none;
  }
}