/* Galería "tendedero": fotos colgadas de una cuerda, cada una un péndulo amortiguado.
   Adaptado del prototipo; clases con prefijo td- y alineado al header sticky de 76px. */
.galeria {
  --moon: #ddb393;
  --td-nav: 76px;
  --td-ease: cubic-bezier(.22, .8, .24, 1);
  position: relative;
  height: 360vh;
  background: radial-gradient(120% 80% at 50% 0%, #2b241e 0%, #18140f 60%, #120f0c 100%);
  color: #fff;
}
.galeria .td-stage {
  position: sticky;
  top: var(--td-nav);
  height: calc(100vh - var(--td-nav));
  height: calc(100svh - var(--td-nav));
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.td-head { position: absolute; top: 18px; left: 0; right: 0; z-index: 3; }
.td-head .wrap { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.td-head h2 { font-size: clamp(2.2rem, 4.6vw, 4.4rem); font-weight: 800; line-height: .95; margin: 0; color: #fff; }
.galeria .eyebrow { color: var(--moon); }
.td-head p { color: #d6cdc3; max-width: 20em; font-size: 1.05rem; margin: 0; }

.td-line { position: absolute; inset: 0; z-index: 1; }
.td-rope { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.td-rope .r-shadow { fill: none; stroke: rgba(0,0,0,.45); stroke-width: 5; stroke-linecap: round; filter: blur(3px); }
.td-rope .r-base { fill: none; stroke: #b98a5b; stroke-width: 4; stroke-linecap: round; }
.td-rope .r-twist { fill: none; stroke: #e3c49c; stroke-width: 1.6; stroke-dasharray: 3 5; stroke-linecap: round; opacity: .9; }

.td-pin {
  position: absolute; left: 0; top: 0; width: var(--cw);
  margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit;
  cursor: zoom-in; transform-origin: 50% 0; will-change: transform;
  -webkit-tap-highlight-color: transparent;
}
.td-pin:focus-visible { outline: none; }
.td-pin:focus-visible .td-print { outline: 3px solid var(--moon); outline-offset: 4px; }
.td-peg { position: absolute; left: 50%; top: -14px; width: 14px; height: 44px; margin-left: -7px; z-index: 2; pointer-events: none; }
.td-peg::before, .td-peg::after {
  content: ""; position: absolute; top: 0; width: 6px; height: 44px; border-radius: 2px 2px 3px 3px;
  background: linear-gradient(90deg, #c9945e, #e2b583 45%, #a8733f); box-shadow: 0 2px 3px rgba(0,0,0,.35);
}
.td-peg::before { left: 0; }
.td-peg::after { right: 0; background: linear-gradient(90deg, #b98450, #d9aa77 50%, #9a6738); }
.td-peg i { position: absolute; left: 50%; top: 16px; width: 12px; height: 8px; margin-left: -6px; border: 2px solid #9aa0a6; border-radius: 50%; z-index: 1; background: transparent; }
.td-print {
  display: block; background: #fbf8f3; padding: 10px 10px 0; border-radius: 3px;
  box-shadow: 0 22px 38px -16px rgba(0,0,0,.75), 0 2px 4px rgba(0,0,0,.25);
  transition: transform .45s var(--td-ease), box-shadow .45s var(--td-ease);
}
.td-print img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; background: #2a2622; pointer-events: none; }
.td-print span { display: block; padding: 10px 4px 13px; color: #2f2b27; font-size: 1rem; font-weight: 700; line-height: 1.15; text-align: center; min-height: 2.3em; }
.td-pin.hold .td-print { transform: translateY(-10px) scale(1.04); box-shadow: 0 34px 50px -18px rgba(0,0,0,.8), 0 2px 4px rgba(0,0,0,.25); }

.td-hint {
  position: absolute; bottom: 4vh; left: 0; right: 0; text-align: center; z-index: 3;
  font-size: .9rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: #a99c8f;
}
.td-hint .hm { display: none; }

.td-lightbox {
  position: fixed; inset: 0; z-index: 300; background: rgba(14,11,9,.92);
  display: flex; align-items: center; justify-content: center; padding: 70px 20px 30px;
  opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; cursor: zoom-out;
}
.td-lightbox.open { opacity: 1; visibility: visible; }
.td-lightbox figure { margin: 0; max-width: min(92vw, 900px); max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.td-lightbox img {
  max-height: calc(100vh - 150px); max-height: calc(100svh - 150px); width: auto; max-width: 100%;
  border: 10px solid #fbf8f3; border-radius: 3px; transform: scale(.96); transition: transform .45s var(--td-ease);
}
.td-lightbox.open img { transform: none; }
.td-lightbox figcaption { color: #e9e1d8; font-weight: 700; font-size: 1.1rem; }
.td-lb-close {
  position: absolute; top: 16px; right: 16px; height: 46px; padding: 0 18px; border-radius: 999px;
  border: 1.5px solid #fff; background: transparent; color: #fff; font-weight: 700; font-size: 1rem; cursor: pointer;
}
.td-lb-close:hover { background: #fff; color: #141414; }

/* Movimiento reducido: fila horizontal estática, sin cuerda animada */
.galeria.rm { height: auto; }
.galeria.rm .td-stage { position: relative; top: auto; height: auto; overflow: visible; }
.galeria.rm .td-head { position: static; padding-top: 60px; }
.galeria.rm .td-line { position: relative; inset: auto; overflow-x: auto; overflow-y: hidden; height: var(--lh, 620px); -webkit-overflow-scrolling: touch; }
.galeria.rm .td-line-inner { position: relative; height: 100%; }
.galeria.rm .td-hint { position: static; padding: 0 0 60px; }

@media (max-width: 860px) {
  .td-hint .hd { display: none; }
  .td-hint .hm { display: inline; }
  .td-head .wrap { flex-direction: column; align-items: flex-start; gap: 8px; }
  .td-head p { font-size: 1rem; }
  .td-print span { font-size: .95rem; }
}

/* ---- Mejoras gráficas ---- */
.galeria .td-stage::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle 150px at 12% 62%, rgba(255, 207, 150, .10), transparent 70%),
    radial-gradient(circle 110px at 30% 84%, rgba(221, 179, 147, .09), transparent 70%),
    radial-gradient(circle 180px at 58% 70%, rgba(255, 214, 170, .08), transparent 70%),
    radial-gradient(circle 120px at 82% 80%, rgba(221, 179, 147, .10), transparent 70%),
    radial-gradient(circle 90px at 94% 56%, rgba(255, 207, 150, .09), transparent 70%);
}
.td-lights path { fill: none; stroke: #3a2f26; stroke-width: 1.6; stroke-linecap: round; }
.td-bulb-core { fill: #ffe9c2; }
.td-bulb-cap { fill: #6b543e; }
.td-bulb-glow { fill: url(#tdGlow); transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .td-bulb-glow { animation: td-twinkle 3.2s ease-in-out infinite alternate; }
}
@keyframes td-twinkle { from { opacity: .55; transform: scale(.9); } to { opacity: 1; transform: scale(1.12); } }

.td-print { position: relative; }
.td-print::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 3px; opacity: .14; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 .4  0 0 0 0 .3  0 0 0 0 .2  0 0 0 .9 0'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
}
.td-print span::before {
  content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 7px; vertical-align: -2px;
  background: url("../img/mark.png") center / contain no-repeat;
}
.td-pin:nth-child(3n+2) .td-print { background: #f6efe4; }
.td-pin:nth-child(3n) .td-print { background: #fffdf9; }