/* ════════════════════════════════════════════════════════════
   GALERÍA REDISEÑO · "The Studio Film" — motion language de Jitter
   Easings custom (overshoot/slow-down), parallax por scroll, marquee
   perpetuo con drag, reveals escalonados, hover con profundidad.
   Paleta vino/dorado real de Cristina Beauty Designer.
   ════════════════════════════════════════════════════════════ */

/* — Easings estilo Jitter (reutilizables) — */
:root {
  --j-overshoot: cubic-bezier(0.34, 1.56, 0.36, 1);   /* Overshoot */
  --j-slowdown:  cubic-bezier(0.16, 1, 0.3, 1);        /* Slow down */
  --j-accel:     cubic-bezier(0.5, 0, 0.75, 0);        /* Accelerate */
  --j-smooth:    cubic-bezier(0.45, 0, 0.55, 1);       /* Smooth inout */
}

.gal2 {
  position: relative;
  background: var(--wine-deep, #4E0610);
  color: var(--cream, #FCFBF9);
  padding-block: clamp(5rem, 11vw, 9rem);
  overflow: hidden;
  isolation: isolate;
}
/* Transición elegante hacia las secciones vecinas (claras) */
.gal2::before,
.gal2::after {
  content: ""; position: absolute; left: 0; right: 0; height: clamp(40px, 7vw, 90px);
  z-index: 1; pointer-events: none;
}
.gal2::before { top: 0; background: linear-gradient(to bottom, rgba(92,7,16,0.35), transparent); }
.gal2::after { bottom: 0; background: linear-gradient(to top, rgba(74,10,10,0.5), transparent); }

/* Fondo ambiental: gradiente + grano sutil que respira */
.gal2-ambient {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 15% 10%, rgba(197,163,90,0.16), transparent 60%),
    radial-gradient(55% 45% at 90% 90%, rgba(161,42,32,0.4), transparent 60%);
}
.gal2-ambient::after {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  opacity: 0.04; mix-blend-mode: overlay;
}

.gal2-inner { position: relative; z-index: 2; max-width: 1400px; margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 2.5rem); }

/* — Cabecera editorial — */
.gal2-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2rem; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.gal2-eyebrow {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-size: 0.7rem; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--gold-light, #ECD7A4); margin-bottom: 1rem;
}
.gal2-eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--gold, #C9A24E); display: inline-block; }
.gal2-title {
  font-family: 'Italiana', serif; font-size: clamp(2.4rem, 7vw, 5.5rem);
  line-height: 0.98; margin: 0; color: var(--cream, #FCFBF9);
}
.gal2-title em { font-family: 'Cormorant Garamond', serif; font-style: italic; color: var(--gold-light, #ECD7A4); }
.gal2-sub {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: clamp(1rem, 2vw, 1.35rem); color: rgba(251,247,240,0.7);
  max-width: 320px; text-align: right;
}
@media (max-width: 760px) { .gal2-head { grid-template-columns: 1fr; } .gal2-sub { text-align: left; max-width: none; } }

/* ─────────── MARQUEE perpetuo (Jitter: perpetual motion) ─────────── */
.gal2-marquee {
  position: relative; margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  cursor: grab;
}
.gal2-marquee:active { cursor: grabbing; }
.gal2-track {
  display: flex; gap: clamp(0.75rem, 2vw, 1.25rem); width: max-content;
  animation: gal2Scroll 38s linear infinite;
  will-change: transform;
}
.gal2-marquee[data-paused="true"] .gal2-track { animation-play-state: paused; }
@keyframes gal2Scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.gal2-tile {
  position: relative; flex: 0 0 auto;
  width: clamp(180px, 26vw, 300px); aspect-ratio: 4/5;
  border-radius: clamp(0.9rem, 1.6vw, 1.4rem); overflow: hidden;
  border: 1px solid rgba(230,211,160,0.18);
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
  transition: transform 0.6s var(--j-slowdown), box-shadow 0.6s var(--j-slowdown), filter 0.6s var(--j-slowdown);
}
.gal2-tile img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.9s var(--j-slowdown), filter 0.6s var(--j-slowdown);
}
.gal2-tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(74,10,10,0.5), transparent 55%);
  opacity: 0.7; transition: opacity 0.5s var(--j-smooth);
}
.gal2-tile-cap {
  position: absolute; left: 12px; bottom: 12px; z-index: 3;
  font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
  color: var(--cream, #FCFBF9); opacity: 1; transform: none;
  padding: 0.4em 0.85em; border-radius: 999px;
  background: rgba(74,10,10,0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(230,211,160,0.28);
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
  transition: opacity 0.5s var(--j-slowdown), transform 0.5s var(--j-overshoot);
}
/* Hover con profundidad (Jitter: focus transition — el resto se atenúa) */
@media (hover: hover) {
  /* La tira SIEMPRE en movimiento — sin atenuar el resto al pasar el cursor.
     Solo un realce muy sutil de la foto bajo el cursor, sin frenar la sensación. */
  .gal2-tile:hover { filter: brightness(1.04) saturate(1.04); box-shadow: 0 24px 56px rgba(92,7,16,0.4); z-index: 4; }
  .gal2-tile:hover img { transform: scale(1.05); }
  .gal2-tile:hover::after { opacity: 0.35; }
}

/* ─────────── MOSAICO parallax (scroll-driven) — grid limpio y alineado ─────────── */
.gal2-mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, clamp(150px, 18vw, 230px));
  gap: clamp(0.6rem, 1.6vw, 1.1rem);
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}
.gal2-cell {
  position: relative; overflow: hidden; border-radius: clamp(0.9rem, 1.6vw, 1.4rem);
  border: 1px solid rgba(230,211,160,0.16);
  /* estado inicial del reveal */
  opacity: 0; transform: translateY(60px) scale(0.94);
  transition: opacity 0.9s var(--j-slowdown), transform 1s var(--j-overshoot);
  will-change: transform, opacity;
}
.gal2-cell.in { opacity: 1; transform: none; }
.gal2-cell img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--j-slowdown); will-change: transform; }
.gal2-cell::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(74,10,10,0.55), transparent 60%);
  opacity: 0.65; transition: opacity 0.5s var(--j-smooth);
}
.gal2-cell-label {
  position: absolute; left: 16px; bottom: 14px; z-index: 3;
  display: flex; flex-direction: column; gap: 2px;
}
.gal2-cell-label .l1 { font-family: 'Italiana', serif; font-size: 1.15rem; color: var(--cream); }
.gal2-cell-label .l2 { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-light); }
@media (hover: hover) {
  .gal2-cell:hover img { transform: scale(1.07); }
  .gal2-cell:hover::after { opacity: 0.4; }
}

/* Colocación explícita (alineada): col1 alta a la izquierda, fila superior
   ancha a la derecha, fila inferior con 3 celdas iguales. */
.gal2-cell--tall { grid-column: 1; grid-row: 1 / span 2; }
.gal2-cell--wide { grid-column: 2 / span 3; grid-row: 1; }
.gal2-cell--sq   { grid-column: 2; grid-row: 2; }
.gal2-cell--sq2  { grid-column: 3; grid-row: 2; }
.gal2-cell--cta  { grid-column: 4; grid-row: 2; }

@media (max-width: 860px) {
  .gal2-mosaic { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; grid-auto-rows: clamp(150px, 38vw, 210px); }
  .gal2-cell--tall { grid-column: 1 / span 2; grid-row: auto; }
  .gal2-cell--wide { grid-column: 1 / span 2; grid-row: auto; }
  .gal2-cell--sq   { grid-column: 1; grid-row: auto; }
  .gal2-cell--sq2  { grid-column: 2; grid-row: auto; }
  .gal2-cell--cta  { grid-column: 1 / span 2; grid-row: auto; }
}

/* CTA Instagram dentro del mosaico */
.gal2-cta-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.75rem; text-decoration: none; height: 100%;
  background:
    radial-gradient(circle at 50% 30%, rgba(197,163,90,0.2), transparent 70%),
    var(--grad-wine, linear-gradient(155deg,#8E0A14,#861F18 52%,#4E0610));
  padding: 1.5rem; text-align: center;
}
.gal2-cta-card svg { color: var(--gold-light, #ECD7A4); transition: transform 0.5s var(--j-overshoot); }
.gal2-cta-card:hover svg { transform: scale(1.12) rotate(-6deg); }
.gal2-cta-card .gal2-cta-txt { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-light); }
.gal2-cta-card .gal2-cta-handle { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.2rem; color: var(--cream); }

/* — Ticker editorial inferior (perpetual motion lenta) — */
.gal2-ticker {
  margin-top: clamp(2.5rem, 6vw, 4rem); border-top: 1px solid rgba(230,211,160,0.18);
  padding-top: clamp(1.5rem, 4vw, 2.5rem); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.gal2-ticker-track {
  display: flex; gap: 2.5rem; width: max-content;
  animation: gal2Scroll 30s linear infinite reverse;
}
.gal2-ticker-item {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: clamp(1.1rem, 2.4vw, 1.7rem); color: rgba(251,247,240,0.55);
  display: inline-flex; align-items: center; gap: 2.5rem; white-space: nowrap;
}
.gal2-ticker-item::after { content: "✦"; color: var(--gold, #C9A24E); font-style: normal; }

@media (prefers-reduced-motion: reduce) {
  .gal2-track, .gal2-ticker-track { animation: none; }
  .gal2-cell { opacity: 1; transform: none; transition: none; }
}