/* =========================================================
   KAO LOUNGE · Galería por meses (estilo Drive · 3 niveles)
   Hereda tokens de styles.css (--gold, --ease-out, etc.)
   ========================================================= */

.galpage { padding-top: clamp(7rem, 13vh, 9.5rem); }

/* ---------- Cabecera ---------- */
.galhead {
  max-width: var(--maxw); margin-inline: auto;
  padding: 0 var(--pad) clamp(1.2rem, 3vw, 2rem);
}
.galhead__back {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .82rem; font-weight: 600; letter-spacing: .02em;
  color: var(--muted); margin-bottom: 1.7rem;
  transition: color .25s var(--ease), gap .25s var(--ease-out);
}
.galhead__back svg { width: 1.05rem; height: 1.05rem; }
.galhead__back:hover { color: var(--gold-bright); gap: .75rem; }
.galhead h1 {
  font-family: var(--font-display); font-weight: 200; line-height: 1;
  font-size: clamp(2.6rem, 7vw, 4.6rem); letter-spacing: -.02em;
  padding-bottom: .06em; text-wrap: balance;
}
.galhead h1 em { font-family: var(--font-serif); font-style: italic; color: var(--gold); font-weight: 400; }
.galhead__sub {
  color: var(--muted); font-size: clamp(1rem, 1.6vw, 1.12rem);
  margin-top: 1rem; max-width: 56ch; text-wrap: pretty; min-height: 1.5em;
}

/* ---------- Nota / estado (demo, errores) ---------- */
.galstatus { max-width: var(--maxw); margin-inline: auto; padding: .2rem var(--pad) 0; }
.galnote {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .82rem; color: var(--muted); line-height: 1.5;
  padding: .55rem .95rem; border: 1px solid var(--hair-gold);
  border-radius: 99px; background: rgba(193, 153, 119, .05); text-wrap: pretty;
}
.galnote::before {
  content: ""; width: 7px; height: 7px; border-radius: 99px;
  background: var(--gold-bright); flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(193, 153, 119, .18);
}

/* ---------- Migas de pan ---------- */
.galcrumbs {
  max-width: var(--maxw); margin: 1rem auto 0; padding: 0 var(--pad);
  display: flex; align-items: center; flex-wrap: wrap; gap: .55rem;
  font-size: .84rem;
}
.galcrumb__link {
  display: inline-flex; align-items: center;
  font-family: var(--font-display); font-weight: 400; letter-spacing: .03em;
  color: var(--muted); transition: color .25s var(--ease);
}
.galcrumb__link:hover { color: var(--gold-bright); }
.galcrumb__sep { display: inline-flex; color: var(--muted-2); margin: 0 -.1rem; }
.galcrumb__sep svg { width: .82rem; height: .82rem; }
.galcrumb__cur {
  font-family: var(--font-display); font-weight: 500; letter-spacing: .03em; color: var(--text);
}

/* ---------- Raíz / título de nivel ---------- */
.galroot { max-width: var(--maxw); margin: clamp(1.2rem, 3vw, 2rem) auto 0; padding: 0 var(--pad); min-height: 40vh; }
.gallevel { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.6rem; }
.gallevel__title {
  font-family: var(--font-display); font-weight: 300; line-height: 1;
  font-size: clamp(1.6rem, 4vw, 2.4rem); letter-spacing: -.01em; white-space: nowrap;
}
.gallevel__title em {
  font-family: var(--font-serif); font-style: italic; color: var(--gold);
  font-weight: 400; font-size: .76em; margin-left: .18em;
}
.gallevel__line { flex: 1; height: 1px; background: var(--hair-gold); }
.gallevel__count {
  font-family: var(--font-display); font-weight: 400; letter-spacing: .06em;
  text-transform: uppercase; font-size: .74rem; color: var(--gold-bright); white-space: nowrap;
}
.gallevel__dl {
  display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
  font-size: .8rem; font-weight: 600; color: var(--muted);
  padding: .42rem .9rem; border: 1px solid var(--hair-white); border-radius: 99px;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.gallevel__dl svg { width: 1rem; height: 1rem; }
.gallevel__dl:hover { color: var(--gold-bright); border-color: var(--gold); }

/* ---------- Rejillas de tarjetas ---------- */
.galcards { display: grid; gap: clamp(.9rem, 1.8vw, 1.4rem); }
.galcards--month { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.galcards--event { grid-template-columns: repeat(auto-fill, minmax(265px, 1fr)); }
@media (max-width: 560px) {
  .galcards--month { grid-template-columns: repeat(2, 1fr); gap: .8rem; }
  .galcards--event { grid-template-columns: 1fr; }
}

/* ---------- Separador "Años anteriores" (año en activo arriba, pasados debajo) ---------- */
.galpast { margin-top: clamp(2.4rem, 6vw, 3.8rem); }
.galpast__label {
  font-family: var(--font-display); font-weight: 400; white-space: nowrap;
  text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; color: var(--muted);
}
.galpast .gallevel__line { background: var(--hair-white); }

/* ====== Tarjeta de MES (portada) ====== */
.galmo {
  position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: var(--r-card); background: var(--surface);
  border: 1px solid var(--hair-white); isolation: isolate;
}
.galmo::before { /* marcador con degradado dorado mientras carga la portada */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 85% at 28% 12%, rgba(193, 153, 119, .30), transparent 58%),
    linear-gradient(180deg, var(--surface-2), var(--bg));
}
.galmo__media { position: absolute; inset: 0; }
.galmo__media img {
  width: 100%; height: 100%; object-fit: cover; opacity: 0;
  transition: opacity .6s var(--ease), transform 1s var(--ease);
}
.galmo__media img.in { opacity: 1; }
.galmo__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 7, 10, 0) 38%, rgba(6, 7, 10, .55) 76%, rgba(6, 7, 10, .85) 100%);
}
.galmo__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1.05rem 1.1rem; }
.galmo__badge {
  display: inline-block; margin-bottom: .55rem;
  font-family: var(--font-display); letter-spacing: .12em; text-transform: uppercase;
  font-size: .6rem; color: #1a130c; padding: .28rem .62rem; border-radius: 99px;
  background: linear-gradient(120deg, var(--gold-bright), var(--gold));
}
.galmo__name {
  display: block; font-family: var(--font-display); font-weight: 300; line-height: .92;
  font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -.01em; color: var(--text);
}
.galmo__year { display: block; margin-top: .15rem; font-family: var(--font-serif); font-style: italic; color: var(--gold-bright); font-size: 1rem; }
.galmo__go {
  position: absolute; top: .7rem; right: .7rem; z-index: 2;
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 99px;
  color: var(--text); background: rgba(8, 9, 11, .42); border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(-4px);
  transition: opacity .3s var(--ease), transform .3s var(--ease-out);
}
.galmo__go svg { width: 16px; height: 16px; }
.galmo:hover .galmo__go { opacity: 1; transform: none; }
.galmo:hover .galmo__media img { transform: scale(1.05); }

/* estado por fecha */
.galmo--past .galmo__media img {
  filter: grayscale(1) contrast(.96) brightness(.9);
  transition: opacity .6s var(--ease), transform 1s var(--ease), filter .6s var(--ease);
}
.galmo--past:hover .galmo__media img { filter: none; }
.galmo--current { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 18px 42px -26px rgba(193, 153, 119, .6); }

/* ====== Tarjeta de EVENTO ====== */
.galev {
  position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--r-card); background: var(--surface);
  border: 1px solid var(--hair-white); isolation: isolate;
}
.galev::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, var(--surface-2), var(--bg));
}
.galev__media { position: absolute; inset: 0; }
.galev__media img {
  width: 100%; height: 100%; object-fit: cover; opacity: 0;
  transition: opacity .6s var(--ease), transform 1s var(--ease);
}
.galev__media img.in { opacity: 1; }
.galev__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 7, 10, 0) 34%, rgba(6, 7, 10, .5) 70%, rgba(6, 7, 10, .8) 100%);
}
.galev__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1.05rem 1.2rem; }
.galev__date {
  display: block; font-family: var(--font-display); letter-spacing: .12em;
  text-transform: uppercase; font-size: .64rem; color: var(--gold-bright); margin-bottom: .3rem;
}
.galev__name {
  display: block; font-family: var(--font-display); font-weight: 400; line-height: 1.05;
  font-size: clamp(1.1rem, 1.7vw, 1.35rem); color: var(--text); text-wrap: balance;
}
.galev__go {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: .5rem;
  font-size: .78rem; font-weight: 600; color: var(--muted);
  transition: color .25s var(--ease), gap .25s var(--ease-out);
}
.galev__go svg { width: .95rem; height: .95rem; }
.galev:hover .galev__go { color: var(--gold-bright); gap: .62rem; }
.galev:hover .galev__media img { transform: scale(1.05); }

/* ====== Movimiento de tarjetas (hover + entrada) ====== */
.galmo, .galev {
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease), border-color .3s var(--ease);
}
.galmo:hover, .galev:hover { transform: translateY(-4px); }
.galmo--current:hover { box-shadow: 0 0 0 1px var(--gold), 0 26px 56px -26px rgba(193, 153, 119, .72); }

html.js .galmo, html.js .galev { opacity: 0; }
html.js .galmo.in, html.js .galev.in {
  opacity: 1; animation: galRise .55s var(--ease-out) backwards; animation-delay: var(--d, 0s);
}
@keyframes galRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* =========================================================
   FOTOS (rejilla masonry) — nivel 3
   ========================================================= */
.galgrid { columns: 3; column-gap: 1.1rem; }
@media (max-width: 860px) { .galgrid { columns: 2; column-gap: .85rem; } }
@media (max-width: 430px) { .galgrid { columns: 1; } }

.galx__item {
  break-inside: avoid; margin-bottom: 1.1rem; position: relative;
  border-radius: 14px; overflow: hidden; border: 1px solid var(--hair-white);
  background: var(--surface);
}
@media (max-width: 860px) { .galx__item { margin-bottom: .85rem; } }

.galx__hit {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; color: inherit; line-height: 0;
}
.galx__hit img { width: 100%; height: auto; display: block; transition: transform .9s var(--ease); }
.galx__item:hover .galx__hit img { transform: scale(1.05); }

.galx__item::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, rgba(6, 7, 10, .34) 0%, transparent 22%, transparent 72%, rgba(6, 7, 10, .42) 100%);
  opacity: 0; transition: opacity .35s var(--ease);
}
.galx__item:hover::after { opacity: 1; }

.galx__zoom {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.85);
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: 99px;
  color: var(--text); background: rgba(8, 9, 11, .42); border: 1px solid rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .3s var(--ease), transform .35s var(--ease-out); z-index: 2;
}
.galx__zoom svg { width: 20px; height: 20px; }
.galx__item:hover .galx__zoom { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.galx__dl {
  position: absolute; top: .6rem; right: .6rem; z-index: 3;
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 99px;
  color: var(--text); background: rgba(8, 9, 11, .5); border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(-4px);
  transition: opacity .3s var(--ease), transform .3s var(--ease-out), color .25s var(--ease), background .25s var(--ease);
}
.galx__dl svg { width: 18px; height: 18px; }
.galx__dl:hover { color: var(--gold-bright); background: rgba(8, 9, 11, .72); }
.galx__dl:active { transform: scale(.94); }
.galx__item:hover .galx__dl { opacity: 1; transform: none; }
@media (hover: none) {
  .galx__dl { opacity: .92; transform: none; }
  .galx__item::after { opacity: 1; }
}

html.js .galx__item {
  opacity: 0; transform: translateY(18px); filter: blur(4px);
  transition: opacity .65s var(--ease-out), transform .65s var(--ease-out), filter .65s var(--ease-out);
  transition-delay: var(--d, 0s);
}
html.js .galx__item.in { opacity: 1; transform: none; filter: none; }

/* ---------- Skeletons ---------- */
.galcards .galskel {
  border-radius: var(--r-card); border: 1px solid var(--hair-white);
  background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%);
  background-size: 220% 100%; animation: galShimmer 1.4s var(--ease) infinite;
}
.galskel--month { aspect-ratio: 3 / 4; }
.galskel--event { aspect-ratio: 4 / 3; }
.galgrid--skel .galskel {
  break-inside: avoid; margin-bottom: 1.1rem; border-radius: 14px;
  border: 1px solid var(--hair-white);
  background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%);
  background-size: 220% 100%; animation: galShimmer 1.4s var(--ease) infinite;
}
.galgrid--skel .galskel:nth-child(3n+1) { height: 260px; }
.galgrid--skel .galskel:nth-child(3n+2) { height: 200px; }
.galgrid--skel .galskel:nth-child(3n) { height: 320px; }
@keyframes galShimmer { to { background-position: -120% 0; } }

/* ---------- Vacío / error ---------- */
.galempty, .galerror {
  text-align: center; max-width: 520px; margin: 1.4rem auto;
  padding: clamp(2.5rem, 6vw, 4rem) var(--pad);
  border: 1px dashed var(--hair-gold); border-radius: var(--r-card);
  background: rgba(193, 153, 119, .03); color: var(--muted);
}
.galerror p { margin-bottom: .8rem; }
.galerror__detail { font-size: .8rem; color: var(--muted-2); font-family: var(--font-body); word-break: break-word; }
.galerror .btn { margin-top: .6rem; }

/* ---------- CTA final ---------- */
.galfoot {
  max-width: var(--maxw); margin: clamp(2.4rem, 6vw, 4rem) auto 0; padding: 0 var(--pad);
  text-align: center;
}
.galfoot p { color: var(--muted); max-width: 46ch; margin: 0 auto 1.5rem; text-wrap: pretty; }
.galfoot__btns { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lbox {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .28s var(--ease), visibility .28s var(--ease);
}
.lbox.open { opacity: 1; visibility: visible; pointer-events: auto; }
.lbox__backdrop {
  position: absolute; inset: 0; background: rgba(5, 6, 8, .9);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.lbox__stage {
  position: relative; z-index: 1; display: grid; place-items: center;
  transform: scale(.96); transition: transform .34s var(--ease-out);
}
.lbox.open .lbox__stage { transform: none; }
.lbox__img {
  display: block; max-width: min(92vw, 1400px); max-height: 80vh;
  border-radius: 12px; background: #0b0d10;
  box-shadow: 0 30px 90px -22px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .05);
  transition: opacity .25s var(--ease);
}
.lbox__img.is-load { opacity: .35; }

.lbox__close {
  position: absolute; top: clamp(.8rem, 2vw, 1.4rem); right: clamp(.8rem, 2vw, 1.4rem); z-index: 3;
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: 99px; cursor: pointer;
  color: var(--text); background: rgba(20, 24, 30, .6); border: 1px solid var(--hair-white);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: color .25s var(--ease), border-color .25s var(--ease), transform .2s var(--ease-out);
}
.lbox__close:hover { color: var(--gold-bright); border-color: var(--gold); }
.lbox__close:active { transform: scale(.94); }
.lbox__close svg { width: 22px; height: 22px; }

.lbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 52px; height: 52px; display: grid; place-items: center; border-radius: 99px; cursor: pointer;
  color: var(--text); background: rgba(20, 24, 30, .55); border: 1px solid var(--hair-white);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.lbox__nav:hover { color: var(--gold-bright); border-color: var(--gold); background: rgba(20, 24, 30, .8); }
.lbox__nav:active { transform: translateY(-50%) scale(.94); }
.lbox__nav svg { width: 24px; height: 24px; }
.lbox__prev { left: clamp(.6rem, 2vw, 1.6rem); }
.lbox__next { right: clamp(.6rem, 2vw, 1.6rem); }

.lbox__bar {
  position: absolute; left: 50%; bottom: clamp(.9rem, 3vw, 1.8rem); transform: translateX(-50%); z-index: 3;
  display: flex; align-items: center; gap: 1.1rem;
}
.lbox__count {
  font-family: var(--font-display); font-weight: 400; letter-spacing: .12em;
  font-size: .85rem; color: var(--muted);
  padding: .5rem .9rem; border-radius: 99px;
  background: rgba(12, 16, 20, .6); border: 1px solid var(--hair-white);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.lbox__dl { font-size: .82rem; }

@media (max-width: 600px) {
  .lbox__nav { width: 44px; height: 44px; top: auto; bottom: clamp(.9rem, 3vw, 1.8rem); transform: none; }
  .lbox__nav:active { transform: scale(.94); }
  .lbox__prev { left: clamp(.6rem, 4vw, 1.6rem); }
  .lbox__next { right: clamp(.6rem, 4vw, 1.6rem); }
  .lbox__img { max-height: 72vh; }
  .lbox__bar { gap: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  html.js .galmo, html.js .galev, html.js .galx__item { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; }
  .galmo__media img, .galev__media img { transition: opacity .3s linear !important; }
  .galmo:hover .galmo__media img, .galev:hover .galev__media img, .galx__item:hover .galx__hit img { transform: none; }
  .galskel { animation: none; }
  .lbox, .lbox__stage, .lbox__img { transition: none; }
}