/* =========================================================================
   PHOTOLAND · GALERÍA — la hoja de contactos
   Hereda las cinco tintas, las fuentes y la tablilla de styles.css.
   Aquí el papel toma la forma de una tira de negativos revelada: cada foto
   en su marco, numerada al margen. Primero el celular: el visitante llega
   de un código QR con el teléfono en la mano.
   ========================================================================= */

:root{ --gbarra-h:56px; }

.cuerpo-gal{ padding-bottom:88px; }   /* hueco para la barra de pulgar */

/* =============================== BARRA =============================== */
.gbarra{
  position:sticky;top:0;z-index:40;
  height:var(--gbarra-h);
  display:flex;align-items:center;gap:12px;
  padding:0 12px;
  background:color-mix(in srgb,var(--papel) 92%,transparent);
  backdrop-filter:saturate(1.3) blur(10px);
  border-bottom:2px solid var(--tinta);
}
/* el logo tambien es un enlace: que mida lo que mide un dedo */
.gbarra__marca{display:flex;align-items:center;text-decoration:none;min-height:44px;padding:0 4px}
.gbarra__marca img{height:28px;width:auto}
.gbarra__et{
  color:var(--tinta-apagada);
  padding-left:12px;border-left:1px solid var(--tinta-45);
}
.gbarra__volver{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  color:var(--tinta);text-decoration:none;
  min-height:44px;padding:0 4px;
}
.gbarra__volver:hover{color:var(--rosa-f)}
@media (max-width:420px){ .gbarra__et{display:none} }

/* =============================== CABEZA =============================== */
.gcab{
  max-width:720px;
  padding:clamp(22px,5vw,46px) clamp(14px,4vw,22px) clamp(14px,3vw,22px);
}
.gcab__sello{
  display:block;color:var(--teal-f);margin-bottom:12px;
}
.gcab h1{margin-bottom:14px}
.gcab__txt{
  max-width:46ch;color:var(--tinta-apagada);
  font-size:clamp(15px,3.6vw,17px);margin:0;
}

/* ============================== FILTROS ==============================
   Fila que se arrastra con el pulgar: ocho zonas no caben en 390 px y
   apilarlas empujaría las fotos fuera de la primera pantalla. */
.gfiltros{
  position:sticky;top:var(--gbarra-h);z-index:30;
  display:flex;gap:7px;
  padding:10px clamp(14px,4vw,22px);
  background:color-mix(in srgb,var(--papel) 94%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--tinta-18);
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.gfiltros::-webkit-scrollbar{display:none;width:0;height:0}

.ficha{
  flex:0 0 auto;
  display:inline-flex;align-items:center;gap:6px;
  min-height:40px;padding:0 13px;
  background:var(--papel);color:var(--tinta);
  border:1.5px solid var(--tinta-45);
  font-family:var(--texto);
  font-variation-settings:'wdth' 74,'wght' 650;
  font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer;white-space:nowrap;
  transition:background .18s,color .18s,border-color .18s;
}
.ficha b{font-variation-settings:'wdth' 62,'wght' 700;color:var(--teal-f)}
.ficha:hover{border-color:var(--tinta)}
.ficha--on{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
.ficha--on b{color:var(--teal-claro)}
@media (prefers-reduced-motion:reduce){ .ficha{transition:none} }

.gcuenta{
  margin:14px clamp(14px,4vw,22px) 10px;
  color:var(--tinta-apagada);
}

/* =============================== LA HOJA =============================
   Columnas, no rejilla: las fotos vienen en vertical y en horizontal
   mezcladas, y una rejilla de filas iguales las recortaría. */
.ghoja{
  --hueco:8px;
  display:flex;align-items:flex-start;gap:var(--hueco);
  margin:0;
  padding:0 clamp(10px,3vw,20px) clamp(30px,6vw,56px);
}
@media (min-width:560px){ .ghoja{--hueco:10px} }
@media (min-width:900px){ .ghoja{--hueco:12px} }

/* Las columnas las reparte el JS, no `columns` de CSS: multicolumna corta la
   lista en N tramos seguidos, así que la foto 01 acababa junto a la 25 y el
   orden de la hoja dejaba de leerse de izquierda a derecha. */
.ghoja__col{
  flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;gap:var(--hueco);
}
.marco{margin:0}

.marco__btn{
  display:block;width:100%;
  margin:0;padding:6px 6px 0;
  background:var(--papel);
  border:1px solid var(--tinta-18);
  box-shadow:var(--sombra-baja);
  font:inherit;color:inherit;text-align:left;cursor:pointer;
  transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s,border-color .2s;
}
.marco__btn:hover{
  transform:translateY(-3px);
  box-shadow:var(--sombra);
  border-color:var(--tinta-45);
}
.marco__btn:active{transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){
  .marco__btn{transition:none}
  .marco__btn:hover{transform:none}
}

.marco__foto{display:block;background:var(--papel-hondo)}
.marco__foto img{width:100%}

.marco__pie{
  display:flex;align-items:baseline;gap:6px;
  padding:7px 2px 8px;
}
.marco__n{
  flex:0 0 auto;
  font-variation-settings:'wdth' 62,'wght' 700;
  font-size:10px;letter-spacing:.06em;
  color:var(--teal-f);
}
.marco__t{
  font-size:10.5px;line-height:1.35;
  color:var(--tinta-apagada);
}

/* =============================== CIERRE =============================== */
.gcierre{
  background:var(--tinta);color:var(--papel);
  padding:clamp(34px,7vw,62px) clamp(18px,5vw,40px);
  text-align:center;
}
.gcierre h2{color:var(--papel);margin-bottom:14px}
.gcierre p{
  max-width:48ch;margin:0 auto 24px;
  color:color-mix(in srgb,var(--papel) 82%,var(--tinta));
  font-size:clamp(15px,3.6vw,17px);
}
.gcierre__acc{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;
}
/* apiladas y de distinto ancho se ven como un escalon; en celular miden igual */
@media (max-width:620px){
  .gcierre__acc{flex-direction:column;align-items:center}
  .gcierre__acc .tablilla{width:100%;max-width:330px;justify-content:center;padding-right:30px}
}

/* ================================= PIE ================================= */
.gpie{
  padding:clamp(24px,5vw,38px) clamp(18px,5vw,40px);
  text-align:center;
  font-size:14px;color:var(--tinta-apagada);
  border-top:1px solid var(--tinta-18);
}
.gpie p{margin:0 0 10px;overflow-wrap:anywhere}
.gpie a{color:var(--tinta)}

/* ========================== BARRA DE PULGAR ===========================
   En celular la acción vive abajo, donde la mano alcanza sin reacomodarse. */
.gpulgar{
  position:fixed;left:0;right:0;bottom:0;z-index:35;
  display:flex;justify-content:center;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--papel) 90%,transparent);
  backdrop-filter:blur(12px);
  border-top:1px solid var(--tinta-45);
}
.gpulgar .tablilla{width:100%;max-width:420px;justify-content:center;padding-right:28px}
@media (min-width:721px){
  .gpulgar{display:none}
  .cuerpo-gal{padding-bottom:0}
}

/* ================================ VISOR ================================ */
body.sin-scroll{overflow:hidden}

.visor{
  position:fixed;inset:0;z-index:60;
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  background:var(--tinta);
  background-image:none;
}
.visor__cab{
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(8px + env(safe-area-inset-top)) 12px 8px;
  color:var(--papel);
}
.visor__num{color:color-mix(in srgb,var(--papel) 76%,var(--tinta))}

.visor__x,
.visor__flecha{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;
  background:color-mix(in srgb,var(--papel) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--papel) 28%,transparent);
  color:var(--papel);cursor:pointer;
  transition:background .18s;
}
.visor__x:hover,
.visor__flecha:hover{background:color-mix(in srgb,var(--papel) 26%,transparent)}
@media (prefers-reduced-motion:reduce){ .visor__x,.visor__flecha{transition:none} }

/* En celular las flechas van ENCIMA de la foto, translúcidas: reservarles
   112 px de ancho dejaba la foto en 278 px de 390. Arriba de 700 px sí hay
   espacio de sobra y se ponen a los lados. */
.visor__flecha{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;
  background:color-mix(in srgb,var(--papel) 12%,transparent);backdrop-filter:blur(3px)}
.visor__flecha--iz{left:3px}
.visor__flecha--de{right:3px}

.visor__lienzo{
  display:flex;align-items:center;justify-content:center;
  min-height:0;padding:4px 6px;
}
@media (min-width:700px){
  .visor__lienzo{padding:8px 60px}
  .visor__flecha{width:44px;height:44px;backdrop-filter:none}
  .visor__flecha--iz{left:10px}
  .visor__flecha--de{right:10px}
}
.visor__lienzo img{
  max-width:100%;max-height:100%;
  width:auto;height:auto;
  box-shadow:var(--sombra-alta);
}

.visor__pie{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:14px 14px calc(16px + env(safe-area-inset-bottom));
}
.visor__tit{
  margin:0;color:var(--papel);
  font-family:var(--rotulo);font-weight:600;
  font-size:clamp(17px,4.4vw,22px);line-height:1.1;text-align:center;
}
.visor__acc{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}