/* ══ GALERÍA · rediseño del cuerpo, 2-oct-2026 ══
   Uriel: «súper fea, súper simple, yo no entraría». El muro parejo de
   siete fotos por pestaña pasa a ser un mosaico editorial por capítulos
   (uno por tema), con filtros que llevan su foto de portada, aparición
   suave al bajar y un visor más grande con tira de miniaturas.
   Esta hoja va DESPUÉS de la agrupada (que trae las reglas viejas de
   .gal-muro, .gsub y .lb en index.css) y solo la carga galeria.html. */

.galeria.gx{padding-top:64px;padding-bottom:88px;
  background:
    radial-gradient(70% 50% at 100% 0%,rgba(124,45,142,.35),transparent 70%),
    radial-gradient(60% 40% at 0% 30%,rgba(236,10,130,.12),transparent 70%),
    var(--tinta)}

/* ── cabeza de la sección ── */
.gx-cabeza{max-width:720px}
.gx-titulo{font-family:'Fraunces';font-weight:900;color:#fff;font-size:clamp(32px,4.6vw,56px);line-height:1.02;letter-spacing:-.015em;margin-top:10px;text-wrap:balance}
.gx-titulo em{font-style:italic;background:var(--rainbow);-webkit-background-clip:text;background-clip:text;color:transparent}
.gx-lead{color:#cfc6de;font-size:16px;line-height:1.6;margin-top:14px;max-width:56ch}

/* sin videos publicados, la barra Fotos/Videos sobra */
.gal-main-tabs.gx-sin-videos{display:none}

/* ── filtros: pastillas con foto ── */
.gal-sub.gx-filtros,#galSub{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.gx-chip{
  display:inline-flex;align-items:center;gap:10px;min-height:48px;
  padding:6px 16px 6px 6px;border-radius:999px;cursor:pointer;
  font-family:'Oswald';font-size:13px;letter-spacing:.07em;text-transform:uppercase;font-weight:500;
  color:#ece6f6;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.14);
  transition:background .2s,border-color .2s,color .2s,transform .2s;
  touch-action:manipulation;
}
.gx-chip:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.32);transform:translateY(-1px)}
.gx-chip:focus-visible{outline:2px solid #fff;outline-offset:3px}
.gx-chip.on{background:var(--c);border-color:var(--c);color:#fff;font-weight:600;box-shadow:0 10px 26px -12px var(--c)}
.gx-chip-ico{width:34px;height:34px;border-radius:50%;overflow:hidden;flex:none;box-shadow:0 0 0 2px rgba(255,255,255,.18)}
.gx-chip.on .gx-chip-ico{box-shadow:0 0 0 2px #fff}
.gx-chip-ico img{width:100%;height:100%;object-fit:cover;display:block}
.gx-chip-todas{display:grid;grid-template-columns:1fr 1fr;gap:2px;width:100%;height:100%;padding:7px;background:rgba(255,255,255,.1)}
.gx-chip-todas i{border-radius:2px;background:#fff;opacity:.85}
.gx-chip-todas i:nth-child(1){background:#EC0A82}.gx-chip-todas i:nth-child(2){background:#FBB200}
.gx-chip-todas i:nth-child(3){background:#5FB924}.gx-chip-todas i:nth-child(4){background:#00A6C8}
.gx-chip-n{font-size:11px;font-weight:600;min-width:24px;text-align:center;padding:2px 7px;border-radius:999px;background:rgba(255,255,255,.12);color:#fff}
.gx-chip.on .gx-chip-n{background:rgba(255,255,255,.24)}

/* ── capítulos ── */
.gal-view{margin-top:12px}
.gx-cap{margin-top:56px}
.gx-cap-cab{display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:6px 22px;
  padding-bottom:18px;margin-bottom:20px;position:relative}
.gx-cap-cab::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--cl),rgba(255,255,255,.08) 55%,transparent)}
.gx-num{font-family:'Oswald';font-weight:600;font-size:clamp(44px,5.4vw,68px);line-height:.8;letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:1.5px var(--cl);opacity:.9}
.gx-cap-txt h3{font-family:'Fraunces';font-weight:900;font-style:italic;font-size:clamp(28px,3.4vw,42px);line-height:1;color:var(--cl)}
.gx-cap-txt p{color:#cfc6de;font-size:15px;line-height:1.5;margin-top:8px;max-width:52ch}
.gx-cnt{font-family:'Oswald';font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#b4a9c9;white-space:nowrap;padding-bottom:4px}

/* ── el mosaico: 24 columnas, filas de 44 px ──
   casilla 0: la grande (14 col × 9 filas) · 1: apaisada (10 × 5)
   2 y 3: cuadradas (5 × 4) · 4, 5 y 6: medianas (8 × 6). En espejo
   (capítulos pares) la grande se va a la derecha. */
.gal-muro.gx-muro{display:grid;gap:12px;grid-auto-flow:row}
.gal-muro.gx-siete{grid-template-columns:repeat(24,minmax(0,1fr));grid-template-rows:repeat(15,44px);grid-auto-rows:44px}
.gx-siete .gx-t0{grid-column:1 / 15;grid-row:1 / 10}
.gx-siete .gx-t1{grid-column:15 / 25;grid-row:1 / 6}
.gx-siete .gx-t2{grid-column:15 / 20;grid-row:6 / 10}
.gx-siete .gx-t3{grid-column:20 / 25;grid-row:6 / 10}
.gx-siete .gx-t4{grid-column:1 / 9;grid-row:10 / 16}
.gx-siete .gx-t5{grid-column:9 / 17;grid-row:10 / 16}
.gx-siete .gx-t6{grid-column:17 / 25;grid-row:10 / 16}
.gx-espejo .gx-siete .gx-t0{grid-column:11 / 25}
.gx-espejo .gx-siete .gx-t1{grid-column:1 / 11}
.gx-espejo .gx-siete .gx-t2{grid-column:1 / 6}
.gx-espejo .gx-siete .gx-t3{grid-column:6 / 11}
/* otra cantidad de fotos: rejilla pareja, la primera doble */
.gal-muro.gx-libre{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:230px}
.gx-libre .gx-t0{grid-column:span 2;grid-row:span 2}

/* ── la tesela ── */
.gal-tesela.gx-t{border-radius:18px;background:#1a1429;animation:none;isolation:isolate;
  box-shadow:0 20px 40px -26px rgba(0,0,0,.8)}
.gx-t img{transition:transform 1.1s cubic-bezier(.2,.7,.2,1),filter .4s ease}
.gx-t:hover img,.gx-t:focus-visible img{transform:scale(1.05)}
.gx-t:focus-visible{outline:3px solid var(--cl,#fff);outline-offset:3px}
.gx-t .gal-cap-t{opacity:1;padding:46px 16px 14px;font-size:11.5px;letter-spacing:.07em;
  background:linear-gradient(180deg,transparent,rgba(15,9,26,.55) 45%,rgba(15,9,26,.88));
  transform:translateY(0);transition:padding .35s ease}
.gx-t:hover .gal-cap-t{padding-bottom:18px}
.gx-t0 .gal-cap-t{font-family:'Fraunces';font-style:italic;font-weight:700;text-transform:none;letter-spacing:0;font-size:22px;padding:80px 22px 20px}
/* la lupa: aparece al pasar el cursor */
.gx-lupa{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;
  background:rgba(15,9,26,.55);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transform:scale(.8);transition:opacity .25s,transform .25s}
.gx-lupa::before{content:"";position:absolute;left:10px;top:10px;width:12px;height:12px;border:2px solid #fff;border-radius:50%}
.gx-lupa::after{content:"";position:absolute;left:23px;top:23px;width:2px;height:7px;background:#fff;border-radius:2px;transform:rotate(-45deg);transform-origin:top}
.gx-t:hover .gx-lupa,.gx-t:focus-visible .gx-lupa{opacity:1;transform:none}

/* aparición suave al bajar (galeria.js pone gx-oculta y luego gx-vista) */
.gx-t.gx-oculta{opacity:0;transform:translateY(26px) scale(.985)}
.gx-t.gx-oculta.gx-vista{opacity:1;transform:none;
  transition:opacity .8s ease var(--rd,0s),transform 1s cubic-bezier(.2,.7,.2,1) var(--rd,0s)}
@media (prefers-reduced-motion:reduce){
  .gx-t.gx-oculta{opacity:1;transform:none}
  .gx-t img,.gx-chip{transition:none}
  .gx-t:hover img{transform:none}
}

/* computadora angosta */
@media (max-width:1024px){
  .gal-muro.gx-siete{grid-template-rows:repeat(15,36px);grid-auto-rows:36px;gap:10px}
}

/* ── teléfono ── */
@media (max-width:720px){
  .galeria.gx{padding-top:44px;padding-bottom:64px}
  .gx-lead{font-size:15px}
  /* los filtros corren de lado, sin partirse en renglones */
  .gal-sub.gx-filtros,#galSub{flex-wrap:nowrap;overflow-x:auto;margin:24px -28px 0;padding:2px 28px 6px;
    scrollbar-width:none;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  #galSub::-webkit-scrollbar{display:none}
  .gx-chip{flex:none;scroll-snap-align:start;font-size:12.5px}
  .gx-cap{margin-top:42px}
  .gx-cap-cab{grid-template-columns:auto 1fr;gap:4px 14px;margin-bottom:14px;padding-bottom:14px}
  .gx-cnt{grid-column:2;padding-bottom:0}
  .gx-cap-txt p{font-size:14px}
  .gal-muro.gx-muro{gap:8px}
  .gal-muro.gx-siete{grid-template-columns:1fr 1fr;grid-template-rows:62vw 40vw 50vw 40vw 50vw;grid-auto-rows:40vw}
  .gx-siete .gx-t0,.gx-espejo .gx-siete .gx-t0{grid-column:1 / 3;grid-row:1}
  .gx-siete .gx-t1,.gx-espejo .gx-siete .gx-t1{grid-column:1;grid-row:2}
  .gx-siete .gx-t2,.gx-espejo .gx-siete .gx-t2{grid-column:2;grid-row:2}
  .gx-siete .gx-t3,.gx-espejo .gx-siete .gx-t3{grid-column:1 / 3;grid-row:3}
  .gx-siete .gx-t4{grid-column:1;grid-row:4}
  .gx-siete .gx-t5{grid-column:2;grid-row:4}
  .gx-siete .gx-t6{grid-column:1 / 3;grid-row:5}
  .gal-muro.gx-libre{grid-template-columns:1fr 1fr;grid-auto-rows:40vw}
  .gal-tesela.gx-t{border-radius:14px}
  .gx-t .gal-cap-t{font-size:10px;padding:30px 10px 9px}
  .gx-t0 .gal-cap-t,.gx-t3 .gal-cap-t,.gx-t6 .gal-cap-t{font-size:12px;padding:40px 14px 12px}
  .gx-t0 .gal-cap-t{font-family:'Fraunces';font-size:18px}
  .gx-lupa{display:none}
}

/* ══ VISOR: más grande, con el tema y una tira para saltar ══ */
.lb .lb-fig{max-width:min(1400px,94vw);gap:14px;align-items:center}
.lb .lb-fig img{max-width:94vw;max-height:calc(100vh - 220px);max-height:calc(100dvh - 220px);border-radius:16px}
.lb .lb-fig figcaption{width:100%;align-items:flex-end;padding:0 6px}
.lb-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
#lbTema{font-family:'Oswald';font-size:11px;letter-spacing:.16em;color:var(--cl,#ff8dc6)}
#lbTema:empty{display:none}
#lbCap{font-family:'Fraunces';font-style:italic;font-weight:700;text-transform:none;letter-spacing:0;font-size:20px;color:#fff;line-height:1.2}
.lb-tira{display:flex;gap:8px;max-width:min(940px,92vw);overflow-x:auto;padding:4px 2px 6px;scrollbar-width:none;align-self:center}
.lb-tira::-webkit-scrollbar{display:none}
.lb-mini{flex:none;width:72px;height:48px;padding:0;border:none;border-radius:8px;overflow:hidden;cursor:pointer;
  opacity:.45;outline:2px solid transparent;outline-offset:2px;transition:opacity .2s,outline-color .2s;background:#1a1429}
.lb-mini img{width:100%;height:100%;object-fit:cover;display:block}
.lb-mini:hover{opacity:.85}
.lb-mini.on{opacity:1;outline-color:#fff}
@media (max-width:720px){
  .lb .lb-fig img{max-height:calc(100vh - 230px);max-height:calc(100dvh - 230px);border-radius:12px}
  #lbCap{font-size:17px}
  .lb-mini{width:56px;height:40px}
}