/* Galería de platos: capa a pantalla completa sobre la web.
   Hereda las variables de tokens.css. */

/* ---- La capa ---------------------------------------------------------------
   El fondo es la tinta de la web (--tinta), no un negro de galería. El negro
   puro rompía el estilo: toda la página es papel cálido, tinta, oro y granate,
   y una capa negra se leía como una aplicación distinta pegada encima. Sobre la
   tinta, que es cálida, las fotos siguen destacando —vienen sobre pizarra— y la
   capa pertenece a la misma casa.
   El velo de oro y granate no es decoración: son los dos acentos del sitio, y
   puestos muy diluidos en las esquinas evitan que el fondo se lea como una
   plancha plana. */
.galeria {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(120% 80% at 18% 0%, rgba(201, 162, 39, 0.10), transparent 62%),
    radial-gradient(100% 70% at 88% 100%, rgba(110, 38, 57, 0.16), transparent 60%),
    var(--tinta);
  padding: 0 var(--paso-2) var(--paso-4);
  opacity: 0;
  transition: opacity 320ms var(--curva);
}

.galeria[hidden] {
  display: none;
}

.galeria--visible {
  opacity: 1;
}

.galeria-barra {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--paso-2);
  padding: var(--paso-3) var(--paso-1) var(--paso-2);
  background: linear-gradient(var(--tinta) 68%, transparent);
  border-bottom: 1px solid rgba(201, 162, 39, 0.22);
}

.galeria-barra h2 {
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-size: clamp(1.35rem, 3.4vw, 2rem);
  color: var(--papel);
  letter-spacing: 0.01em;
}

.galeria-cerrar,
.visor-cerrar {
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  border: 1px solid rgba(247, 241, 227, 0.22);
  background: rgba(247, 241, 227, 0.06);
  color: var(--papel);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transicion), border-color var(--transicion);
}

.galeria-cerrar:hover,
.galeria-cerrar:focus-visible,
.visor-cerrar:hover,
.visor-cerrar:focus-visible {
  background: rgba(247, 241, 227, 0.16);
  border-color: var(--oro);
}

/* ---- El mosaico ------------------------------------------------------------
   Columnas de verdad, no `column-count`: el reparto lo decide JavaScript por
   altura acumulada (repartirEnColumnas), porque con verticales y horizontales
   mezcladas el reparto automático deja una columna mucho más larga. */
.galeria-mosaico {
  display: flex;
  align-items: flex-start;
  gap: var(--paso-2);
  max-width: 1400px;
  margin: 0 auto;
}

.columna-galeria {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--paso-2);
}

.pieza-galeria {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radio);
  overflow: hidden;
  background: rgba(247, 241, 227, 0.04);
  cursor: zoom-in;
  /* Punto de partida de la entrada escalonada. Sin esto, las piezas aparecen
     todas de golpe y el mosaico se lee como una plancha quieta. */
  opacity: 0;
  transform: translateY(1.5rem);
  /* La proporción la fija JavaScript en línea con las medidas reales, para
     que el hueco exista antes de que cargue la imagen y la rejilla no salte. */
}

.pieza-galeria img,
.pieza-galeria video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 620ms var(--curva), filter 620ms var(--curva);
}

/* El acercamiento al pasar por encima es de un 3%: lo justo para que la pieza
   responda al cursor. Más que eso deja ver el recorte y parece un carrusel de
   plantilla. */
@media (hover: hover) {
  .pieza-galeria:hover img,
  .pieza-galeria:hover video,
  .pieza-galeria:focus-visible img,
  .pieza-galeria:focus-visible video {
    transform: scale(1.03);
  }
}

.pieza-galeria-nombre {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--paso-3) var(--paso-2) var(--paso-2);
  font-family: var(--fuente-texto);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: left;
  color: var(--papel);
  background: linear-gradient(transparent, rgba(18, 16, 14, 0.9));
  opacity: 0;
  transform: translateY(0.4rem);
  transition: opacity var(--transicion), transform var(--transicion);
}

.pieza-galeria:hover .pieza-galeria-nombre,
.pieza-galeria:focus-visible .pieza-galeria-nombre {
  opacity: 1;
  transform: none;
}

/* En táctil no hay «pasar por encima»: el nombre se queda puesto siempre, o
   no se leería nunca. */
@media (hover: none) {
  .pieza-galeria-nombre {
    opacity: 1;
    transform: none;
  }
}

/* Las piezas entran una detrás de otra, en el orden del mosaico. 55 ms de
   separación: lo bastante para que se lea como una cascada y lo bastante poco
   para que la última no se haga esperar — once piezas son seis décimas de
   cola. */
.galeria--visible .pieza-galeria {
  animation: entra-pieza 620ms var(--curva) both;
  animation-delay: calc(var(--orden, 0) * 55ms);
}

@keyframes entra-pieza {
  to {
    opacity: 1;
    transform: none;
  }
}

/* La pieza de vídeo se distingue por un punto de oro, no por un botón de play
   encima: el vídeo ya se está moviendo, y un triángulo sobre la imagen es
   ruido. */
.pieza-galeria--video::after {
  content: '';
  position: absolute;
  top: var(--paso-2);
  right: var(--paso-2);
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--oro);
  box-shadow: 0 0 0 4px rgba(201, 162, 39, 0.22);
}

/* ---- El visor --------------------------------------------------------------
   Va por encima de la galería, no la sustituye: al cerrarlo se vuelve al
   mosaico en la misma posición de scroll. */
.visor {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--paso-2);
  /* El hueco de abajo lo reserva el padding, no una fila de rejilla: el pie va
     posicionado y centrado respecto a la ventana. Dentro de la rejilla, con las
     flechas ocupando las columnas laterales, quedaba desplazado del centro de
     la imagen. */
  padding: var(--paso-3) var(--paso-2) var(--paso-4);
  background: rgba(18, 16, 14, 0.975);
  opacity: 0;
  transition: opacity 240ms var(--curva);
}

.visor[hidden] {
  display: none;
}

.visor--visible {
  opacity: 1;
}

.visor-figura {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--paso-2);
  min-width: 0;
  min-height: 0;
  height: 100%;
  margin: 0;
}

/* min-height: 0 es imprescindible: sin él, un hijo flexible no puede encoger
   por debajo de su contenido y la imagen desborda la ventana por abajo. */
.visor-media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  width: 100%;
}

.visor-figura img,
.visor-figura video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radio);
}

.visor-pie {
  flex: none;
  text-align: center;
  font-family: var(--fuente-titulo);
  font-size: clamp(0.95rem, 2.2vw, 1.25rem);
  color: var(--papel);
}

.visor-cerrar {
  position: absolute;
  top: var(--paso-2);
  right: var(--paso-2);
  z-index: 2;
}

.visor-flecha {
  grid-row: 1;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  border: 1px solid rgba(247, 241, 227, 0.18);
  background: rgba(247, 241, 227, 0.05);
  color: var(--papel);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transicion), border-color var(--transicion);
}

.visor-flecha--atras { grid-column: 1; }
.visor-flecha--adelante { grid-column: 3; }

.visor-flecha:hover,
.visor-flecha:focus-visible {
  background: rgba(247, 241, 227, 0.14);
  border-color: var(--oro);
}

/* Las flechas se quedan en el móvil. Estaban escondidas dando por hecho que
   bastaba con deslizar, y con el vídeo no basta: el propio reproductor captura
   el gesto y el visor no llega a enterarse, así que quien abría el suflé se
   quedaba sin manera de volver a los platos. Se encogen y bajan a la altura
   del pulgar, pero se ven. */
@media (max-width: 640px) {
  .visor {
    grid-template-columns: auto 1fr auto;
    gap: var(--paso-1);
    padding: var(--paso-4) var(--paso-1) var(--paso-3);
  }
  .visor-flecha {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.4rem;
    background: rgba(18, 16, 14, 0.55);
    backdrop-filter: blur(4px);
  }
}

/* ---- La entrada, al pie de la carta ---------------------------------------- */
.entrada-galeria {
  margin-top: var(--paso-3);
}

.boton-galeria {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.85em 1.6em;
  border: 1px solid var(--tinta);
  border-radius: 999px;
  background: transparent;
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion);
}

.boton-galeria::after {
  content: '';
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: var(--oro);
}

.boton-galeria:hover,
.boton-galeria:focus-visible {
  background: var(--tinta);
  color: var(--papel);
}

/* Quien pide menos movimiento no debería recibir ninguno. */
@media (prefers-reduced-motion: reduce) {
  .galeria,
  .visor,
  .pieza-galeria img,
  .pieza-galeria video,
  .pieza-galeria-nombre {
    transition: none;
  }
  .pieza-galeria:hover img,
  .pieza-galeria:hover video {
    transform: none;
  }
  .pieza-galeria {
    opacity: 1;
    transform: none;
  }
  .galeria--visible .pieza-galeria {
    animation: none;
  }
}

/* Mientras se está desvaneciendo, la capa sigue en el documento y seguiría
   tragándose los clics destinados a la web de debajo. */
.galeria:not(.galeria--visible),
.visor:not(.visor--visible) {
  pointer-events: none;
}

/* --- Pase de postres --------------------------------------------------------
   Reusa el esqueleto del visor y cambia solo lo que hace falta para que mande
   la foto. Lo importante es el negro: el visor de platos usa carbón traslúcido
   (#12100E al 97,5 %) porque sus fotos vienen sobre fondos claros y necesitan
   un marco. Estas vienen sobre pizarra negra, así que un fondo negro puro borra
   la costura entre la imagen y la pantalla y el postre parece flotar. Por lo
   mismo se van el redondeo y el margen: cualquier borde delata el rectángulo. */
.pase {
  background: var(--tinta);
  padding: var(--paso-2) var(--paso-2) 0;
  grid-template-rows: 1fr auto;
}

.pase .visor-figura {
  position: relative;
  grid-row: 1;
  gap: 0;
}

.pase .visor-figura img,
.pase .visor-figura video {
  border-radius: 0;
  max-height: 100%;
}

/* La costura. La promesa del pase es que el postre flote, y para eso el fondo de
   la foto y el de la pantalla tienen que ser el mismo negro. No lo son: medidas
   una a una, las esquinas de estas pizarras van de rgb(0,0,0) a rgb(25,26,28).
   Sobre un fondo plano, las más claras dibujan el rectángulo.
   Dos remedios juntos. El fondo de la capa es --tinta —rgb(18,16,14), que es
   casi clavado el promedio de esas esquinas y además el negro de la casa— y los
   bordes de la foto se difuminan dos dedos, de modo que lo que aún no coincida
   se disuelva en vez de cortar. Se difumina solo la imagen: el vídeo del suflé
   ya viene sobre negro y su marco no molesta.
   El difuminado son dos degradados cruzados que se cortan entre sí. Si un
   navegador no entiende mask-composite se quedará sin apenas efecto, que es
   exactamente lo que había antes: se degrada a lo que ya funcionaba. */
.pase .visor-figura img {
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* El fundido va sobre el contenedor, no sobre la imagen: la imagen se sustituye
   a mitad de camino y animar un elemento que va a desaparecer deja el fotograma
   final en blanco. Los 240 ms van por debajo de los 260 que espera js/pase.js. */
.pase .visor-media {
  height: 100%;
  transition: opacity 240ms var(--curva);
}

.pase .visor-media--fundido {
  opacity: 0;
}

/* El nombre, abajo a la izquierda y en cursiva de Fraunces: el registro que en
   esta web significa «la voz de la casa» —la firma de Francis, el subtítulo de
   portada— y no una etiqueta de catálogo. Sin puntero para que no estorbe al
   pulsar sobre la foto. */
.pase .visor-pie {
  position: absolute;
  left: 0;
  bottom: var(--paso-1);
  text-align: left;
  font-style: italic;
  font-size: clamp(0.95rem, 2vw, 1.3rem);
  color: rgba(247, 241, 227, 0.86);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.95);
  pointer-events: none;
}

/* La tira ocupa las tres columnas de la rejilla del visor, por debajo de las
   flechas. Se desplaza a lo ancho si no cabe, sin barra a la vista. */
.pase-tira {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: var(--paso-1) 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.pase-tira::-webkit-scrollbar {
  display: none;
}

.pase-miniatura {
  flex: 0 0 auto;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--radio);
  background: none;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity var(--transicion), border-color var(--transicion);
}

.pase-miniatura img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pase-miniatura:hover,
.pase-miniatura:focus-visible {
  opacity: 0.85;
}

.pase-miniatura[aria-current='true'] {
  opacity: 1;
  border-color: var(--oro);
}

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