/* ==========================================================================
   REVELA — las diez rejillas
   Las usan igual la muestra de la portada y la galería de verdad.
   Cada pieza trae --r (ancho/alto) puesto desde el JS.          JD Martin
   ========================================================================== */
.rej { --hueco: 10px; --fila: 240px; --col: 240px; }
.rej .pieza {
  position: relative; margin: 0; padding: 0; border: 0; background: var(--rej-hueco, rgba(0,0,0,.05));
  overflow: hidden; display: block; width: 100%; cursor: zoom-in;
  border-radius: var(--rej-redondo, 0px);
}
.rej .pieza img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .7s cubic-bezier(.2,.7,.3,1), opacity .5s;
}
.rej .pieza.cargando img { opacity: 0; }
.rej .pieza:hover img { transform: scale(1.035); }
.rej .pieza:focus-visible { outline: 2px solid var(--ambar); outline-offset: 2px; }

/* corazón y palomita que viven encima de cada foto */
.rej .marca-fav, .rej .marca-sel {
  position: absolute; width: 34px; height: 34px; border-radius: 999px;
  display: grid; place-items: center; opacity: 0; transition: opacity .2s, transform .2s, background .2s;
  background: rgba(255,255,255,.88); color: #15171A; backdrop-filter: blur(6px);
}
.rej .marca-fav { right: 9px; bottom: 9px; }
.rej .marca-sel { left: 9px; top: 9px; }
.rej .pieza:hover .marca-fav, .rej .pieza:hover .marca-sel,
.rej .pieza:focus-within .marca-fav, .rej .marca-fav.puesta, .rej .marca-sel.puesta { opacity: 1; }
.rej .marca-fav.puesta { background: #A8412F; color: #fff; }
.rej .marca-sel.puesta { background: #15171A; color: #fff; }
.rej .marca-fav:hover, .rej .marca-sel:hover { transform: scale(1.1); }
.rej .marca-fav svg, .rej .marca-sel svg { width: 16px; height: 16px; }
@media (hover: none) { .rej .marca-fav, .rej .marca-sel { opacity: .85; } }

/* pie de foto, solo donde la rejilla lo pide */
.rej .pie-foto {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px;
  font-size: 12px; letter-spacing: .04em; color: #fff; opacity: 0; transition: opacity .25s;
  background: linear-gradient(transparent, rgba(0,0,0,.6)); pointer-events: none;
}
.rej .pieza:hover .pie-foto { opacity: 1; }

/* ------------------------------------------------------------- 1. MOSAICO */
/* Filas justificadas: cada foto guarda su proporción y la fila se cuadra sola. */
.rej-mosaico { display: flex; flex-wrap: wrap; gap: var(--hueco); }
.rej-mosaico .pieza {
  height: var(--fila); flex-grow: calc(var(--r) * 1000); flex-basis: calc(var(--r) * var(--fila)); width: auto;
}
.rej-mosaico::after { content: ''; flex-grow: 1e6; } /* la última fila no se estira de más */

/* ------------------------------------------------------------- 2. CUADROS */
.rej-cuadros { display: grid; gap: var(--hueco); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--col)), 1fr)); }
.rej-cuadros .pieza { aspect-ratio: 1 / 1; }

/* ------------------------------------------------------------ 3. COLUMNAS */
.rej-columnas { columns: var(--col) 4; column-gap: var(--hueco); }
.rej-columnas .pieza { break-inside: avoid; margin-bottom: var(--hueco); aspect-ratio: var(--r); }

/* ------------------------------------------------------------- 4. REVISTA */
/* Ritmo editorial de seis: una grande, dos chicas, una ancha, dos medianas. */
.rej-revista { display: grid; gap: var(--hueco); grid-template-columns: repeat(12, 1fr); grid-auto-flow: dense; }
.rej-revista .pieza { grid-column: span 6; aspect-ratio: 3 / 2; }
.rej-revista .pieza:nth-child(6n+1) { grid-column: span 7; aspect-ratio: 4 / 3; }
.rej-revista .pieza:nth-child(6n+2) { grid-column: span 5; aspect-ratio: 4 / 5; }
.rej-revista .pieza:nth-child(6n+3) { grid-column: span 5; aspect-ratio: 1 / 1; }
.rej-revista .pieza:nth-child(6n+4) { grid-column: span 7; aspect-ratio: 3 / 2; }
.rej-revista .pieza:nth-child(6n+5) { grid-column: span 12; aspect-ratio: 21 / 9; }
.rej-revista .pieza:nth-child(6n+6) { grid-column: span 12; aspect-ratio: 16 / 7; }

/* ------------------------------------------------------------ 5. DISPERSA */
/* Mucho aire. Las fotos flotan en una retícula de doce con saltos a propósito. */
.rej-dispersa { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0; row-gap: clamp(26px, 5vw, 76px); }
.rej-dispersa .pieza { aspect-ratio: var(--r); align-self: start; }
.rej-dispersa .pieza:nth-child(7n+1) { grid-column: 1 / span 4; }
.rej-dispersa .pieza:nth-child(7n+2) { grid-column: 7 / span 3; margin-top: clamp(22px, 6vw, 110px); }
.rej-dispersa .pieza:nth-child(7n+3) { grid-column: 10 / span 3; margin-top: clamp(-40px, -3vw, 0px); }
.rej-dispersa .pieza:nth-child(7n+4) { grid-column: 2 / span 3; margin-top: clamp(10px, 3vw, 60px); }
.rej-dispersa .pieza:nth-child(7n+5) { grid-column: 6 / span 4; }
.rej-dispersa .pieza:nth-child(7n+6) { grid-column: 9 / span 4; margin-top: clamp(20px, 5vw, 90px); }
.rej-dispersa .pieza:nth-child(7n+7) { grid-column: 3 / span 5; margin-top: clamp(-30px, -2vw, 0px); }

/* ----------------------------------------------------------------- 6. TIRA */
.rej-tira {
  display: flex; gap: var(--hueco); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; padding-bottom: 14px; scrollbar-width: thin;
}
.rej-tira .pieza { height: clamp(260px, 56vh, 560px); flex: 0 0 auto; width: calc(var(--r) * clamp(260px, 56vh, 560px)); scroll-snap-align: center; }
.rej-tira::-webkit-scrollbar { height: 6px; }
.rej-tira::-webkit-scrollbar-thumb { background: var(--linea); border-radius: 99px; }

/* ----------------------------------------------------------- 7. DESTACADOS */
/* Una foto a la vez, grande, alternando lado. Para las que se tienen que ver. */
.rej-destacados { display: grid; gap: clamp(34px, 7vw, 110px); }
.rej-destacados .pieza { aspect-ratio: var(--r); width: min(68%, 760px); }
.rej-destacados .pieza:nth-child(even) { justify-self: end; width: min(54%, 620px); }
.rej-destacados .pieza:nth-child(3n+3) { width: min(82%, 980px); justify-self: center; }
.rej-destacados .pie-foto { opacity: 1; background: none; color: inherit; position: static; padding: 10px 0 0; }
.rej-destacados .pieza { overflow: visible; }
.rej-destacados .pieza img { border-radius: var(--rej-redondo, 0px); }


/* ------------------------------------------------------------ 8. CONTACTO */
/* La hoja de contactos de toda la vida: chiquitas, numeradas y apoyadas en la
   misma línea, para que el cliente escoja rápido en vez de contemplar. */
.rej-contacto {
  counter-reset: cuadro;
  display: grid; align-items: end;
  gap: clamp(18px, 2.4vw, 26px) clamp(8px, 1.2vw, 13px);
  grid-template-columns: repeat(auto-fill, minmax(min(46%, 128px), 1fr));
  background: var(--rej-hueco, rgba(0,0,0,.05));
  padding: clamp(12px, 2.2vw, 24px) clamp(12px, 2.2vw, 24px) clamp(22px, 3vw, 34px);
}
.rej-contacto .pieza { counter-increment: cuadro; aspect-ratio: var(--r); align-self: end; }
.rej-contacto .pieza img { transition: opacity .3s, filter .3s; }
.rej-contacto .pieza:hover img { transform: none; filter: brightness(1.06); }
.rej-contacto .pieza::after {
  content: counter(cuadro, decimal-leading-zero) "A";
  position: absolute; left: 5px; bottom: 4px; z-index: 1;
  font-size: 9px; letter-spacing: .14em; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.7); pointer-events: none;
}
.rej-contacto .marca-fav { width: 28px; height: 28px; right: 5px; bottom: 4px; }
.rej-contacto .marca-fav svg { width: 13px; height: 13px; }

/* ------------------------------------------------------------- 9. DÍPTICO */
/* De dos en dos, como las páginas de un álbum abierto. Cada cinco, una se
   abre a todo lo ancho — ahí va la que se tiene que ver grande. */
.rej-diptico {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  column-gap: clamp(8px, 1.6vw, 22px); row-gap: clamp(26px, 5vw, 62px);
}
.rej-diptico .pieza { aspect-ratio: var(--r); }
.rej-diptico .pieza:nth-child(5n+5) { grid-column: span 2; }

/* ----------------------------------------------------------- 10. PASARELA */
/* Una foto por pantalla y completa: nada se recorta. El scroll se va
   acomodando solo. Es la que mejor se siente en el teléfono. */
.rej-pasarela { display: grid; gap: clamp(16px, 3.4vw, 46px); justify-items: center; }
.rej-pasarela .pieza {
  aspect-ratio: var(--r); max-height: min(84vh, 900px);
  width: auto; max-width: 100%; margin-inline: auto;
  scroll-snap-align: center; cursor: zoom-in;
}
.rej-pasarela .pieza img { object-fit: cover; }
.rej-pasarela .pieza:hover img { transform: none; }
.rej-pasarela .pie-foto { opacity: 1; text-align: center; padding: 34px 14px 12px; }
/* el acomodo del scroll solo se prende cuando la galería usa esta rejilla */
html.con-pasarela { scroll-snap-type: y proximity; }

/* ------------------------------------------------------------- en teléfono */
@media (max-width: 860px) {
  .rej { --hueco: 7px; --fila: 165px; --col: 150px; }
  .rej-revista .pieza, .rej-revista .pieza:nth-child(6n+1), .rej-revista .pieza:nth-child(6n+2),
  .rej-revista .pieza:nth-child(6n+3), .rej-revista .pieza:nth-child(6n+4) { grid-column: span 6; }
  .rej-revista .pieza:nth-child(6n+1) { grid-column: span 12; }
  .rej-revista .pieza:nth-child(6n+5), .rej-revista .pieza:nth-child(6n+6) { grid-column: span 12; }
  .rej-dispersa { row-gap: 22px; }
  .rej-dispersa .pieza:nth-child(7n+1) { grid-column: 1 / span 7; }
  .rej-dispersa .pieza:nth-child(7n+2) { grid-column: 8 / span 5; margin-top: 30px; }
  .rej-dispersa .pieza:nth-child(7n+3) { grid-column: 2 / span 6; margin-top: 0; }
  .rej-dispersa .pieza:nth-child(7n+4) { grid-column: 8 / span 5; margin-top: 18px; }
  .rej-dispersa .pieza:nth-child(7n+5) { grid-column: 1 / span 6; }
  .rej-dispersa .pieza:nth-child(7n+6) { grid-column: 7 / span 6; margin-top: 26px; }
  .rej-dispersa .pieza:nth-child(7n+7) { grid-column: 3 / span 8; margin-top: 0; }
  .rej-destacados .pieza, .rej-destacados .pieza:nth-child(even), .rej-destacados .pieza:nth-child(3n+3) { width: 100%; justify-self: stretch; }
  .rej-columnas { columns: 2 120px; }
  .rej-contacto { grid-template-columns: repeat(auto-fill, minmax(min(47%, 104px), 1fr)); }
  .rej-diptico { column-gap: 6px; row-gap: 26px; }
  .rej-pasarela .pieza { max-height: 76vh; }
}