/* NEMOGENIA — galería minimalista
   Paleta: negro absoluto, tipografía fina, la foto manda. */

:root{
  --bg:#000;
  --ink:#f4f2ee;
  --muted:#c4bfb6;                 /* texto secundario: antes #7a766f, casi ilegible sobre negro */
  --dim:#9a958c;                   /* lo más secundario aún (contadores de fondo) */
  --line:rgba(244,242,238,.22);
  --line-strong:rgba(244,242,238,.5);
  --gap:2px;                       /* separación entre miniaturas */
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
/* .gallery y .viewer declaran display:flex/grid, que gana al `hidden` del HTML.
   Sin esto el visor queda invisible pero encima de todo y se traga los clics. */
[hidden]{display:none!important}
html,body{height:100%}
html{
  -webkit-text-size-adjust:100%;
  /* En móvil, arrastrar el dedo en la portada hacía "rebotar" toda la página
     y parecía que el fondo temblaba. */
  overscroll-behavior-y:none;
}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
svg{fill:none;stroke:currentColor;stroke-width:1.3;
    stroke-linecap:round;stroke-linejoin:round}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:20px;height:20px;flex:none;display:block}
.ico--sm{width:16px;height:16px}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
/* Sin esto, quien navegue con teclado no ve dónde está. */
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ── Navegación (los botones redondos de arriba a la derecha) ───
   Icono siempre; con etiqueta de texto cuando hay sitio. */
.nav{display:flex;align-items:center;gap:8px}
.nav__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-width:44px;min-height:44px;padding:0 12px;
  border:1px solid var(--line);border-radius:999px;
  background:rgba(0,0,0,.42);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:var(--muted);
  font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.nav__btn:hover{color:var(--ink);border-color:var(--line-strong);background:rgba(255,255,255,.1)}
.nav__lbl{display:none}
@media (min-width:820px){
  .nav__lbl{display:inline}
  .nav__btn{padding:0 18px 0 14px}
}
/* El icono de pantalla completa cambia al estar activa. */
.fs__close{display:none}
body.is-full .fs__open{display:none}
body.is-full .fs__close{display:block}
/* iPhone no permite pantalla completa en páginas web: se quita el botón
   en vez de dejar uno que no hace nada. */
html.no-fs [data-act="fs"]{display:none}

/* ── Portada ───────────────────────────────────────────────── */
.intro{
  position:fixed;inset:0;z-index:40;overflow:hidden;
  display:grid;place-items:center;
  transition:opacity 1s var(--ease),visibility 1s;
}
.intro--gone{opacity:0;visibility:hidden;pointer-events:none}
/* El fondo y el velo tapaban la portada entera: cualquier clic moría en ellos
   y sólo funcionaba el botón. Así se puede entrar pulsando donde sea. */
.intro__bg,.intro__veil{pointer-events:none}

/* El fondo mide siempre la altura del viewport GRANDE (100lvh) y se ancla
   arriba. En móvil la barra de direcciones aparece y desaparece al tocar;
   si el fondo midiera la altura "dinámica" se reescalaría con cada cambio
   y la foto temblaría. 100vh queda de respaldo para navegadores viejos. */
.intro__bg,.intro__veil{
  position:absolute;left:0;top:0;width:100%;
  height:100vh;height:100lvh;
}
.intro__bg{
  background-size:cover;background-position:center;
  will-change:transform;backface-visibility:hidden;
  transform:translate3d(0,0,0) scale(1.06);
  animation:drift 24s ease-in-out infinite alternate;
  opacity:0;transition:opacity 1.6s var(--ease);
}
.intro__bg.is-on{opacity:.55}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1.06)}
                 to{transform:translate3d(-1.5%,-1.5%,0) scale(1.14)}}
/* En pantallas táctiles la foto queda quieta: animar una imagen tan grande
   a la vez que el navegador móvil cambia de tamaño era lo que la hacía
   temblar. */
@media (hover:none) and (pointer:coarse){
  .intro__bg{animation:none;transform:translate3d(0,0,0) scale(1.04)}
}
.intro__veil{
  background:radial-gradient(ellipse at center,rgba(0,0,0,.35) 0%,rgba(0,0,0,.85) 75%);
}
.intro__nav{
  position:absolute;z-index:3;
  top:max(clamp(14px,2.6vw,30px),env(safe-area-inset-top));
  right:clamp(14px,3.2vw,44px);
}
.intro__inner{position:relative;text-align:center;padding:0 24px;z-index:2}

.wordmark{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:300;
  /* 9 letras con .34em de tracking ocupan ~8.9× el cuerpo: por encima de 9vw
     el logotipo se salía por los lados y `overflow-x:hidden` lo recortaba. */
  font-size:clamp(1.7rem,9vw,7rem);
  letter-spacing:.34em;
  padding-left:.34em;           /* recentra: el tracking sobra por la derecha */
  line-height:1;
  animation:rise 1.4s var(--ease) both;
}
.tagline{
  margin-top:1.7rem;
  font-size:clamp(.86rem,2vw,1.02rem);letter-spacing:.3em;text-transform:uppercase;
  color:var(--ink);opacity:.92;
  text-shadow:0 1px 14px rgba(0,0,0,.8);
  animation:rise 1.4s .18s var(--ease) both;
}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.motto{
  margin:1.2rem auto 0;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-style:italic;font-weight:400;
  font-size:clamp(1.15rem,2.8vw,1.6rem);
  line-height:1.35;letter-spacing:.02em;
  color:var(--ink);
  text-shadow:0 1px 14px rgba(0,0,0,.85);
  max-width:30ch;
  animation:rise 1.4s .3s var(--ease) both;
}

/* «Ver la obra» es ahora un botón de verdad: borde, relleno al pasar por
   encima y flecha que invita a pulsar. */
.enter{
  margin-top:2.8rem;
  display:inline-flex;align-items:center;gap:.9rem;
  min-height:52px;padding:0 2rem 0 2.2rem;
  border:1px solid var(--line-strong);border-radius:999px;
  background:rgba(0,0,0,.35);
  font-size:.92rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink);
  animation:rise 1.4s .4s var(--ease) both;
  transition:background .4s var(--ease),border-color .4s var(--ease);
}
.enter:hover{background:rgba(255,255,255,.14);border-color:var(--ink)}
.enter .ico{width:22px;height:22px;animation:nudge 2.2s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
.enter__hint{
  margin-top:1rem;font-size:.84rem;letter-spacing:.1em;color:var(--muted);
  text-shadow:0 1px 10px rgba(0,0,0,.85);
  animation:rise 1.4s .5s var(--ease) both;
}

/* ── Cabecera común (colecciones y galería) ────────────────── */
.topbar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px 16px;
  padding:clamp(14px,2.4vw,28px) 2px 10px;
}
.topbar__mark{
  font-family:'Cormorant Garamond',serif;
  font-size:1.2rem;letter-spacing:.42em;padding-left:.42em;
}
.topbar__sub{
  flex:0 0 100%;
  display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem;
  font-size:.92rem;letter-spacing:.05em;color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.crumb__link{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:6px 12px 6px 6px;margin-left:-6px;border-radius:999px;
  color:var(--ink);transition:background .3s var(--ease);
}
.crumb__link:hover{background:rgba(255,255,255,.1)}
.crumb__sep{color:var(--dim)}
.crumb__name{font-weight:500;color:var(--ink);letter-spacing:.08em}
.crumb__meta{color:var(--muted)}

/* ── Colecciones ───────────────────────────────────────────────
   Cuatro franjas a pantalla completa, una por colección, cada una con
   una fotografía al azar de dentro. */
.cols{
  position:fixed;inset:0;z-index:30;
  background:var(--bg);
  opacity:0;transition:opacity 1s var(--ease);
}
.cols.is-on{opacity:1}
.topbar--cols{
  position:absolute;top:0;left:0;right:0;z-index:4;
  padding:max(clamp(14px,2.4vw,28px),env(safe-area-inset-top)) clamp(14px,3.2vw,44px) 28px;
  pointer-events:none;
}
/* Un degradado detrás de la cabecera para que se lea sobre cualquier foto. */
.topbar--cols::before{
  content:'';position:absolute;inset:0 0 -30px 0;z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.4) 55%,rgba(0,0,0,0) 100%);
}
.topbar--cols .topbar__mark,
.topbar--cols .nav,
.topbar--cols .topbar__sub{pointer-events:auto}
.topbar--cols .topbar__sub{text-shadow:0 1px 12px rgba(0,0,0,.9);color:var(--ink)}

.cols__grid{
  height:100%;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--line);
}

.col{
  position:relative;overflow:hidden;
  display:block;width:100%;height:100%;
  cursor:pointer;
  opacity:0;
  animation:colIn 1.1s var(--ease) forwards;
}
@keyframes colIn{to{opacity:1}}

.col img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  /* Al azar salen fotos nocturnas o submarinas, ya de por sí oscuras:
     con poco brillo desaparecían. */
  filter:grayscale(.6) brightness(.9);
  transform:scale(1.04);
  transition:filter 1.1s var(--ease),transform 1.6s var(--ease);
}
.col:hover img,.col:focus-visible img{
  filter:grayscale(0) brightness(1);
  transform:scale(1.11);
}
/* Un velo vertical para que el título se lea sobre cualquier foto. */
.col::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.26) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,.66) 100%);
  transition:opacity .9s var(--ease);
}
.col:hover::before{opacity:.72}

.col__txt{
  position:absolute;left:0;right:0;bottom:clamp(36px,7vh,80px);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:.9rem;
  text-align:center;padding:0 12px;
  text-shadow:0 1px 22px rgba(0,0,0,.8);   /* legible sobre fotos claras */
}
.col__nombre{
  display:block;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:400;font-style:italic;
  font-size:clamp(2rem,3.4vw,3.6rem);
  letter-spacing:.1em;padding-left:.1em;
  line-height:1.1;
  transition:letter-spacing .9s var(--ease)}
.col:hover .col__nombre{letter-spacing:.16em;padding-left:.16em}
.col__n{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);opacity:.92;
}
/* Botón «Entrar»: siempre visible, también en táctil (donde no hay hover
   que revele que la tarjeta es pulsable). */
.col__go{
  display:inline-flex;align-items:center;gap:.6rem;
  min-height:44px;padding:0 1.3rem 0 1.5rem;
  border:1px solid var(--line-strong);border-radius:999px;
  background:rgba(0,0,0,.4);
  font-size:.82rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);
  transition:background .4s var(--ease),border-color .4s var(--ease);
}
.col:hover .col__go,.col:focus-visible .col__go{background:rgba(255,255,255,.18);border-color:var(--ink)}
.col__go .ico{width:18px;height:18px;transition:transform .4s var(--ease)}
.col:hover .col__go .ico{transform:translateX(4px)}

/* ── Galería ───────────────────────────────────────────────── */
.gallery{
  height:100vh;height:100dvh;overflow:hidden;      /* las 8 fotos + paginación caben siempre */
  display:flex;flex-direction:column;
  padding:0 clamp(14px,3.2vw,44px);
  opacity:0;transition:opacity 1.1s .15s var(--ease);
}
.gallery.is-on{opacity:1}

/* 8 fotos por página: 4 × 2 */
.grid{
  flex:1;min-height:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(2,1fr);
  gap:var(--gap);
}
.cell{
  position:relative;overflow:hidden;
  min-height:0;
  background:#0a0a0a;
  cursor:pointer;
  opacity:0;transform:translateY(14px);
  animation:cellIn .85s var(--ease) forwards;
}
@keyframes cellIn{to{opacity:1;transform:none}}
.cell img{
  width:100%;height:100%;object-fit:cover;display:block;
  /* Estado en reposo: color contenido. El haz lo descubre al entrar. */
  filter:grayscale(0) brightness(.9) saturate(.92);
  transform:scale(1.001);
  transition:filter .9s var(--ease),transform 1.2s var(--ease),opacity .8s var(--ease);
  opacity:0;
}
.cell img.is-loaded{opacity:1}
/* El filtro lo manda el haz (una animación gana a una transición),
   así que aquí sólo el acercamiento. */
.cell:hover img{transform:scale(1.045)}

/* ── El haz ────────────────────────────────────────────────────
   Una franja de luz recorre la rejilla en diagonal, sin parar, mientras
   se esté en la página. A su paso las fotos pasan de blanco y negro a
   color, se quedan un rato así y vuelven al gris antes de la siguiente
   pasada. El desfase de cada celda lo calcula el JS (ver SWEEP_*). */
.grid{position:relative}

/* 10 s por ciclo: el haz cruza en la primera mitad y vuelve en la segunda. */
.grid.is-sweeping .cell img{
  animation:revelar 10s linear infinite;
}
@keyframes revelar{
  0%   {filter:grayscale(1) brightness(.72) saturate(1)}
  12%  {filter:grayscale(0) brightness(1.06) saturate(1.14)}   /* pasa el haz */
  30%  {filter:grayscale(0) brightness(.96) saturate(1)}
  55%  {filter:grayscale(0) brightness(.92) saturate(.95)}     /* se mantiene */
  85%  {filter:grayscale(1) brightness(.72) saturate(1)}       /* vuelve al gris */
  100% {filter:grayscale(1) brightness(.72) saturate(1)}
}

/* Al pasar el ratón se detiene el ciclo en el punto en que esté,
   para poder mirar la foto con calma. */
.cell:hover img{animation-play-state:paused}

.grid.is-sweeping::after{
  content:'';
  position:absolute;inset:0;z-index:3;pointer-events:none;
  mix-blend-mode:screen;
  background:linear-gradient(100deg,
    rgba(255,255,255,0)    42%,
    rgba(255,255,255,.04)  47%,
    rgba(255,255,255,.12)  50%,
    rgba(255,255,255,.04)  53%,
    rgba(255,255,255,0)    58%);
  animation:haz 10s linear infinite;
}
@keyframes haz{
  0%   {transform:translate3d(-110%,0,0)}
  55%  {transform:translate3d(110%,0,0)}
  100% {transform:translate3d(110%,0,0)}   /* fuera de pantalla: no se ve el salto */
}
.cell::after{
  content:attr(data-n);
  position:absolute;left:12px;bottom:10px;
  font-size:.72rem;letter-spacing:.2em;color:var(--ink);
  opacity:0;transition:opacity .5s var(--ease);
  mix-blend-mode:difference;font-variant-numeric:tabular-nums;
}
.cell:hover::after{opacity:.9}

/* ── Paginación ────────────────────────────────────────────── */
.pager{
  display:flex;align-items:center;justify-content:center;gap:clamp(.6rem,2vw,1.6rem);
  padding:clamp(14px,2.4vw,26px) 0 clamp(8px,1.4vw,14px);
}
.pager__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-width:44px;min-height:44px;padding:0 12px;
  border:1px solid var(--line);border-radius:999px;
  color:var(--muted);
  font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.pager__lbl{display:none}
@media (min-width:560px){
  .pager__lbl{display:inline}
  .pager__btn{padding:0 20px}
}
.pager__btn:hover:not(:disabled){color:var(--ink);border-color:var(--line-strong);background:rgba(255,255,255,.08)}
.pager__btn:disabled{opacity:.3;cursor:default}
.pager__dots{display:flex;align-items:center}
/* El punto se ve de 5 px pero el borde transparente le da un área táctil
   de 21 px: a 5 px es imposible acertar con el dedo. */
.dot{
  box-sizing:content-box;
  width:5px;height:5px;border-radius:50%;
  border:8px solid transparent;
  background-color:var(--ink);background-clip:content-box;
  opacity:.3;
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.dot:hover{opacity:.65}
.dot.is-active{opacity:1;transform:scale(1.7)}
/* Extremo de la ventana: hay más páginas por ese lado. */
.dot--edge{opacity:.14;transform:scale(.6)}
.dot--edge:hover{opacity:.45}

.foot{
  display:flex;justify-content:space-between;align-items:center;
  padding:0 2px max(clamp(12px,1.8vw,22px),env(safe-area-inset-bottom));
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.foot a{display:inline-flex;align-items:center;gap:.45rem;padding:8px 4px}
.foot a:hover{color:var(--ink)}

/* ── Visor ─────────────────────────────────────────────────── */
.viewer{
  position:fixed;inset:0;z-index:60;
  background:rgba(0,0,0,.97);
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  opacity:0;transition:opacity .45s var(--ease);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.viewer.is-on{opacity:1}
.viewer__top{
  position:absolute;top:0;left:0;right:0;z-index:3;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:max(14px,env(safe-area-inset-top)) clamp(12px,2vw,24px) 14px;
  pointer-events:none;
}
.viewer__top > *{pointer-events:auto}
.viewer__hint{font-size:.84rem;letter-spacing:.06em;color:var(--muted)}
.hint{display:inline-flex;align-items:center;gap:.5rem}
.hint--touch{display:none}
@media (hover:none){
  .hint--kbd{display:none}
  .hint--touch{display:inline-flex}
}
kbd{
  font:inherit;font-size:.8rem;color:var(--ink);
  padding:.12rem .5rem;border:1px solid var(--line-strong);border-radius:6px;
  background:rgba(255,255,255,.06);
}
.viewer__stage{
  height:100vh;height:100dvh;
  padding:clamp(76px,10vh,110px) clamp(8px,2vw,24px) clamp(60px,9vh,92px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;
}
.viewer__stage img{
  max-width:100%;max-height:100%;object-fit:contain;
  opacity:0;transform:scale(.985);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.viewer__stage img.is-on{opacity:1;transform:none}
.viewer__stage figcaption{
  font-size:.95rem;letter-spacing:.1em;color:var(--ink);opacity:.9;
  text-align:center;max-width:62ch;line-height:1.7;
}
.viewer__nav{
  width:56px;height:56px;padding:0;margin:0 clamp(8px,2vw,24px);
  display:grid;place-items:center;
  border:1px solid var(--line);border-radius:50%;
  background:rgba(0,0,0,.45);color:var(--muted);
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease)}
.viewer__nav .ico{width:24px;height:24px}
.viewer__nav:hover:not(:disabled){color:var(--ink);border-color:var(--line-strong);background:rgba(255,255,255,.1)}
.viewer__nav:disabled{opacity:.22;cursor:default}
.viewer__index{
  position:absolute;bottom:max(20px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);
  font-size:.84rem;letter-spacing:.26em;color:var(--muted);
  font-variant-numeric:tabular-nums}

/* ── Aviso (sin fotos / error) ─────────────────────────────── */
.notice{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:90;
  max-width:min(92vw,560px);
  padding:14px 20px;border:1px solid var(--line);
  background:rgba(10,10,10,.94);
  font-size:.86rem;letter-spacing:.04em;line-height:1.7;color:var(--muted);
  text-align:center;
}
.notice code{color:var(--ink);font-family:ui-monospace,SFMono-Regular,monospace}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width:1000px){
  /* Las colecciones pasan a 2×2 */
  .cols__grid{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr)}
  .col__txt{bottom:clamp(16px,4vh,36px);gap:.7rem}
  .col__go{padding:0 1rem 0 1.15rem;font-size:.74rem;letter-spacing:.16em}

  /* 2 × 4 = siguen siendo 8; aquí sí se hace scroll */
  .gallery{height:auto;min-height:100vh;min-height:100dvh;overflow:visible}
  .grid{grid-template-columns:repeat(2,1fr);grid-template-rows:none}
  .cell{aspect-ratio:1/1}
}
@media (max-width:560px){
  :root{--gap:2px}
  .topbar__mark{font-size:1.05rem;letter-spacing:.32em;padding-left:.32em}
  .foot{flex-direction:column;gap:6px;text-align:center}
  .viewer{grid-template-columns:1fr}
  .viewer__nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;margin:0 8px}
  .viewer__nav--prev{left:0}
  .viewer__nav--next{right:0}
  .viewer__stage{padding-left:4px;padding-right:4px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  /* El haz está en bucle: acortarlo a .01 ms sería un parpadeo violento.
     Para quien pida menos movimiento se apaga y las fotos se dejan en color. */
  .grid.is-sweeping .cell img{animation:none!important;
    filter:grayscale(0) brightness(.94) saturate(.98)}
  .grid.is-sweeping::after{display:none}
  .intro__bg,.enter .ico{animation:none!important}
}