/* ==========================================================================
   galeria.css — /galeria: collage fotográfico asimétrico (lenguaje editorial-cartel).
   Fotos en B/N con bordes duros que se superponen entre sí y con la tipografía gigante (letras y fotos en el
   mismo plano). Cada 6 fotos se repite un «tramo»; entre tramos, una frase del Manual de Marca que las fotos
   cruzan. La página va en TEMA CLARO fijo ('theme' => 'light' en config.php → tokens.css): todos los colores
   salen de --bg / --fg / --fg-2 / --calido. El lightbox sí es oscuro (una foto ampliada se ve mejor sobre negro).
   ========================================================================== */

.js:not(.rm) .gitem__frame { clip-path: inset(100% 0 0 0); }

/* ══ HERO ══════════════════════════════════════════════════════════════════ */
.ghero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 62svh; display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--bg); color: var(--fg);
}
.ghero__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 40px; padding: calc(var(--header-h) + 24px) var(--pad-r) clamp(24px, 5vh, 56px) var(--pad-l); }
.ghero__intro { display: grid; gap: 14px; max-width: 36ch; }
.ghero__lead { font-size: clamp(1.15rem, .9rem + 1vw, 1.65rem); font-weight: 600; line-height: 1.24; letter-spacing: -.01em; text-wrap: balance; }
.ghero__count { display: grid; justify-items: end; gap: 6px; line-height: .8; }
.ghero__count b { font-size: clamp(4.5rem, 1rem + 10vw, 11rem); font-weight: 800; }
.ghero__count span { font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--calido); }

.ghero__title { position: relative; margin: 0; padding-top: 18px; overflow: visible; }
.ghero__title::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--grad-marca); transform-origin: 0 50%; transform: scaleX(var(--rule, 1)); }
.js:not(.rm) .ghero__title { --rule: 0; }
.ghero__title [data-fit] { font-size: 12vw; line-height: .86; padding-bottom: .02em; color: var(--fg); }

/* ══ COLLAGE ═══════════════════════════════════════════════════════════════ */
.gal { position: relative; background: var(--bg); padding-bottom: clamp(48px, 9vh, 120px); overflow-x: clip; }
/* el hero se queda el título por debajo: el primer tramo sube y le pisa la parte baja de las letras */
.ghero { overflow-x: clip; overflow-y: visible; z-index: 0; }   /* recorta solo en horizontal: las fotos pueden pisar las letras por abajo */
.gal { z-index: 1; margin-top: calc(var(--gal-fs, 16vw) * -.1); }   /* solape suficiente para compartir plano, sin comerse la base de las letras */

.gspread { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding-inline: var(--pad-l) var(--pad-r); }

/* Cada foto es un botón (abre el lightbox). Hueco con proporción propia: --gr (dato) o --slot-r (patrón). */
.gitem {
  position: relative; display: block; width: 100%; padding: 0; text-align: left; cursor: zoom-in;
  aspect-ratio: var(--gr, var(--slot-r, 4/5)); background: var(--negro-2);
  border: 1px solid var(--linea-fuerte);
}
.gitem__frame { position: absolute; inset: 0; display: block; overflow: hidden; }
.gitem .photo::after { transition: opacity var(--t-med) var(--ease-out); }
.gitem__n {
  position: absolute; left: 10px; bottom: 10px; z-index: 6; padding: 4px 8px;
  background: var(--negro); color: var(--blanco); font: 700 12px/1 var(--font-body); letter-spacing: .14em;
  opacity: 0; transform: translateY(6px); transition: opacity var(--t-fast), transform var(--t-med) var(--ease-out);
}
@media (hover: hover) {
  .gitem:hover .photo::after { opacity: .35; }
  .gitem:hover .gitem__n { opacity: 1; transform: none; }
}
.gitem:focus-visible { z-index: 20 !important; outline-offset: 4px; }
.gitem:focus-visible .gitem__n { opacity: 1; transform: none; }

/* Móvil y tableta: una columna escalonada, con solapes */
.gitem:nth-child(1) { grid-column: 1 / span 5; grid-row: 1; --slot-r: 4/5; z-index: 2; }
.gitem:nth-child(2) { grid-column: 3 / span 4; grid-row: 2; --slot-r: 1/1; z-index: 3; margin-top: -12vw; }
.gitem:nth-child(3) { grid-column: 1 / span 4; grid-row: 3; --slot-r: 3/4; z-index: 1; margin-top: 5vw; }
.gitem:nth-child(4) { grid-column: 3 / span 4; grid-row: 4; --slot-r: 3/2; z-index: 4; margin-top: -10vw; }
.gitem:nth-child(5) { grid-column: 1 / span 6; grid-row: 5; --slot-r: 16/9; z-index: 2; margin-top: 4vw; }
.gitem:nth-child(6) { grid-column: 2 / span 5; grid-row: 6; --slot-r: 4/3; z-index: 5; margin-top: -10vw; }

/* Escritorio: 12 columnas, desfases verticales y fotos que se montan unas sobre otras */
@media (min-width: 1000px) {
  .gspread { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .gitem:nth-child(1) { grid-column: 1 / span 5;  grid-row: 1; --slot-r: 4/5;  margin-top: 0;      z-index: 2; }
  .gitem:nth-child(2) { grid-column: 5 / span 4;  grid-row: 1; --slot-r: 1/1;  margin-top: 13vw;   z-index: 3; }
  .gitem:nth-child(3) { grid-column: 9 / span 4;  grid-row: 1; --slot-r: 3/4;  margin-top: 3vw;    z-index: 1; }
  .gitem:nth-child(4) { grid-column: 2 / span 4;  grid-row: 2; --slot-r: 3/2;  margin-top: -7vw;   z-index: 4; }
  .gitem:nth-child(5) { grid-column: 6 / span 6;  grid-row: 2; --slot-r: 16/9; margin-top: 2vw;    z-index: 2; }
  .gitem:nth-child(6) { grid-column: 4 / span 5;  grid-row: 3; --slot-r: 4/3;  margin-top: -9vw;   z-index: 5; }
}

/* Frase a gran tamaño entre tramos: las fotos del tramo siguiente le pisan la parte baja */
.gword {
  position: relative; z-index: 1; display: grid; margin: clamp(48px, 9vw, 140px) 0 calc(var(--fit-size, 10vw) * -.28);
  padding-inline: var(--pad-l) var(--pad-r); line-height: .86; pointer-events: none;
}
.gword span { padding-bottom: .02em; }
.gword span:nth-child(1) { color: var(--rojo); }
.gword span:nth-child(2) { color: var(--fg); justify-self: end; }
.gword [data-fit] { font-size: 12vw; }

/* ══ LIGHTBOX ══════════════════════════════════════════════════════════════ */
.lb {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: #0a0909; color: var(--blanco); overflow: hidden;
  --fg: var(--blanco); --fg-2: var(--gris); --calido: var(--brass);
  /* las líneas derivan de --fg en :root (ya resueltas): se redefinen aquí para que sigan siendo claras sobre negro */
  --linea: rgb(255 255 255 / .2); --linea-fuerte: rgb(255 255 255 / .5);
  opacity: 0; transition: opacity .35s var(--ease-out);
}
.lb::backdrop { background: #0a0909; }
.lb[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.lb[open].is-in { opacity: 1; }
html.lb-open { overflow: hidden; }

.lb__bar { display: flex; align-items: center; justify-content: space-between; padding: max(14px, env(safe-area-inset-top)) var(--pad-r) 8px var(--pad-l); }
.lb__count { font: 700 12px/1 var(--font-body); letter-spacing: .2em; color: var(--brass); font-variant-numeric: tabular-nums; }
.lb__close { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; padding: 0 2px; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-small); letter-spacing: .2em; text-transform: uppercase; }
.lb__close i { position: relative; width: 26px; height: 26px; }
.lb__close i::before, .lb__close i::after { content: ""; position: absolute; left: 0; top: 12px; width: 100%; height: 2px; background: var(--blanco); transition: background-color var(--t-fast); }
.lb__close i::before { transform: rotate(45deg); } .lb__close i::after { transform: rotate(-45deg); }
@media (hover: hover) { .lb__close:hover i::before, .lb__close:hover i::after { background: var(--rojo); } }

.lb__fig { margin: 0; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; place-items: center; padding: 0 clamp(64px, 9vw, 140px) max(18px, env(safe-area-inset-bottom)); }
.lb__stage { display: grid; place-items: center; width: 100%; height: 100%; min-height: 0; touch-action: pan-y; }
.lb__stage > * { animation: lb-in .5s var(--ease-out) both; }
@keyframes lb-in { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
/* Foto ampliada: COLORES ORIGINALES, sin ningún filtro (ni B/N, ni duotone, ni velo). Los filtros del collage
   viven en «.photo > img» y «.photo::after»; la imagen del lightbox no está dentro de un .photo. */
.lb__stage img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border: 1px solid var(--linea-fuerte); filter: none; mix-blend-mode: normal; }
.lb__stage .photo { width: min(100%, 900px); aspect-ratio: 3 / 2; max-height: 100%; border: 1px solid var(--linea-fuerte); }
.lb__stage .photo::after { display: none; }
.lb__pie { margin-top: 14px; padding-left: 14px; border-left: 2px solid var(--rojo); max-width: 60ch; justify-self: start; color: var(--gris); font-size: var(--fs-small); line-height: 1.5; }

.lb__nav {
  position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; margin-top: -24px;
  border: 1px solid var(--linea-fuerte); background: #0a0909;
  transition: background-color var(--t-fast), border-color var(--t-fast);
}
.lb__nav svg { width: 22px; height: 22px; fill: none; stroke: var(--blanco); stroke-width: 2; stroke-linecap: square; }
.lb__nav--prev { left: max(10px, env(safe-area-inset-left)); } .lb__nav--next { right: max(10px, env(safe-area-inset-right)); }
@media (hover: hover) { .lb__nav:hover { background: var(--rojo); border-color: var(--rojo); } }
.lb__nav[disabled] { opacity: .3; cursor: default; }
@media (max-width: 640px) { .lb__fig { padding-inline: 12px; } .lb__nav { top: auto; bottom: 14px; margin-top: 0; } }

@media (prefers-reduced-motion: reduce) { .lb, .lb__stage > * { transition: none; animation: none; } }

/* ══ CIERRE ═════════════════════════════════════════════════════════════════ */
.gfin { display: grid; justify-items: center; text-align: center; gap: clamp(18px, 2.6vw, 34px); padding: clamp(64px, 11vh, 130px) var(--pad-r) clamp(48px, 8vh, 96px) var(--pad-l); border-top: 1px solid var(--linea); }
.gfin__sign { width: min(86vw, 560px); padding: clamp(12px, 2.4vw, 36px); color: var(--rojo); }
.firma--gfin { width: 100%; height: auto; }
.gfin__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }