/* ==========================================================================
   EL ESPECTÁCULO / THE SHOW — page styles
   Layout measured on the 1920px Wix page; --u is "one Wix pixel" so the
   big blocks scale proportionally down to tablet, then restack on mobile.
   ========================================================================== */
.page-espectaculo {
  --u: calc(min(100vw, 1920px) / 1920);
  --text: #ffffff;                 /* Wix color_15: body copy on this page */
}

/* ---------- Intro: big logo + small Tarasca prize ------------------------ */
.show-intro {
  background: var(--navy);
  text-align: center;
  padding: calc(150 * var(--u)) 5vw calc(117 * var(--u));
}
.show-intro img { margin: 0 auto; }
.show-logo { width: calc(978 * var(--u)); }
.show-prize-sm { width: calc(193 * var(--u)); margin-top: calc(62 * var(--u)) !important; }

/* ---------- Masonry gallery (Wix Pro Gallery, 3 x 525px, no spacing) ------ */
.show-gallery {
  background: var(--black);
  container-type: inline-size;
}
.gal {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: calc(min(1575px, 100cqw) / 450); /* column width / 150 */
  grid-auto-flow: row dense;
  width: min(1575px, 100%);
  margin: 0 auto;
}
.gi { position: relative; overflow: hidden; background: #000; }
.gi-p { grid-row: span 225; }   /* 525 x 788 portrait  */
.gi-l { grid-row: span 100; }   /* 525 x 350 landscape */
.gi-s { grid-row: span 69; }    /* 364+161 x 242 pair  */
.gi-t { grid-row: span 113; }   /* 262+263 x 394 pair  */
.gi-s, .gi-t { display: flex; }
.gi a { display: block; height: 100%; overflow: hidden; }
.gi-p a, .gi-l a { width: 100%; }
.gi-s .gs-l { flex: 0 0 69.33%; }
.gi-s .gs-p { flex: 0 0 30.67%; }
.gi-t a { flex: 1 1 50%; }
.gi img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.gi a:hover img, .gi a:focus-visible img { transform: scale(1.06); }
.gi a:focus-visible { outline: 3px solid var(--teal); outline-offset: -3px; }

/* ---------- Show text + prize ------------------------------------------- */
.show-text {
  background: var(--navy);
  color: var(--text);
  padding: calc(287 * var(--u)) 5vw calc(217 * var(--u));
}
.show-text-inner { max-width: 1160px; margin: 0 auto; }
.show-text h1 {
  font-size: max(40px, calc(74 * min(100vw, 2240px) / 1920));   /* como Presentación */
  line-height: 1.4;
  text-align: center;
  margin: 0 0 16px;
}
.prose p {
  font-size: 20px;
  line-height: 1.6;
  text-align: justify;
  margin: 0 0 32px;
}
.prize { text-align: center; margin: 64px 0 28px; }
.prize p { margin: 0; font-family: var(--font-head); font-weight: 500; color: var(--teal); line-height: 1.4; }
.prize-title { font-size: 30px; }
.prize-sub { font-size: 20px; }
.show-prize-lg { width: calc(583 * var(--u)); margin: 90px auto 0; }

/* ---------- Slider + three acts ------------------------------------------ */
.show-acts { background: var(--navy); padding: calc(70 * var(--u)) 0 0; }
.acts-wrap { width: calc(1720 * var(--u)); margin: 0 auto; }

.slider { position: relative; margin-bottom: calc(70 * var(--u)); }
.slider-track {
  display: flex;
  gap: calc(20 * var(--u));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.slider-track::-webkit-scrollbar { display: none; }
.slider-track li {
  flex: 0 0 calc((100% - 40 * var(--u)) / 3);
  aspect-ratio: 560 / 450;
  border-radius: calc(20 * var(--u));
  overflow: hidden;
  scroll-snap-align: start;
  background: #000;
}
.slider-track img { width: 100%; height: 100%; object-fit: cover; }
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 64px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6));
  transition: opacity .3s;
}
.slider-btn:hover { opacity: .75; }
.slider-btn:focus-visible { outline: 2px solid var(--teal); border-radius: 8px; }
.slider-btn[hidden] { display: none; }
.slider-prev { left: calc(8 * var(--u)); }
.slider-next { right: calc(8 * var(--u)); }

.act {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(1006 * var(--u));
  margin-top: calc(100 * var(--u));
  border-radius: calc(30 * var(--u));
  overflow: hidden;
  background: var(--navy);
  isolation: isolate;
}
.act:first-of-type { margin-top: 0; }
.act-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.act-box {
  position: relative;
  z-index: 1;
  width: calc(860 * var(--u));
  margin: calc(60 * var(--u)) 0 calc(60 * var(--u)) calc(112 * var(--u));
  padding: calc(8 * var(--u)) 0 calc(156 * var(--u)) calc(86 * var(--u));
  border-radius: calc(20 * var(--u));
  background: rgba(11, 19, 33, .62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--text);
}
.act-rose { width: calc(217 * var(--u)); margin-bottom: calc(20 * var(--u)); }
.act-box h2 {
  font-size: clamp(24px, 2.5vw, 48px);
  line-height: 1.2;
  margin: 0 0 16px;
}
.act-box p {
  width: calc(632 * var(--u));
  max-width: 100%;
  font-size: clamp(16px, 1.05vw, 20px);
  line-height: 1.6;
  text-align: justify;
  margin: 0;
}

/* ---------- Credits ------------------------------------------------------ */
.show-credits {
  background: var(--black);
  color: var(--text);
  text-align: center;
  padding: calc(69 * var(--u)) 5vw calc(120 * var(--u));   /* Wix had 359: ~390px of blank space before the photo strip */
}
.show-credits h2 {
  font-size: clamp(34px, 3.8vw, 73px);
  line-height: 1.4;
  margin: 0 0 61px;
}
.credits {
  margin: 0 auto;
  max-width: 900px;
  font-size: 18px;
  line-height: 1.6;
}
.credit { margin: 0 0 1.6em; }
.credits dt, .credits dd { margin: 0; }

/* ---------- Bottom photo strip (2 x 2, 960 x 372 each) -------------------- */
.show-strip { background: var(--black); }
.strip { display: grid; grid-template-columns: 1fr 1fr; }
.strip li { aspect-ratio: 960 / 372; overflow: hidden; background: #000; }
.strip img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Lightbox ------------------------------------------------------ */
.lb {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, .93);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  cursor: zoom-out;
}
.lb[hidden] { display: none; }
.lb-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; cursor: default; box-shadow: 0 10px 40px rgba(0, 0, 0, .6); }
.lb-close {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--teal);
  color: var(--black);
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
}
body.lb-open { overflow: hidden; }

/* ---------- Responsive --------------------------------------------------- */
@media (max-width: 1100px) {
  .act-box p { font-size: 16px; }
  .credits { font-size: 17px; }
}

/* Act cards: below ~900px the glass box gets too narrow, stack image + text */
@media (max-width: 900px) {
  .act { display: block; min-height: 0; margin-top: 40px; border-radius: 20px; }
  .act-bg { position: static; width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .act-box {
    width: auto;
    margin: 0;
    padding: 24px 28px 34px;
    border-radius: 0;
    background: var(--navy);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .act-rose { width: 130px; margin-bottom: 16px; }
  .act-box h2 { font-size: 32px; margin-bottom: 12px; }
  .act-box p { width: auto; font-size: 17px; }
}

@media (max-width: 750px) {
  .show-intro { padding: 44px 6vw 36px; }
  .show-logo { width: 80vw; max-width: 420px; }
  .show-prize-sm { width: 120px; margin-top: 28px !important; }

  .gal { grid-template-columns: repeat(2, 1fr); grid-auto-rows: calc(100cqw / 300); }

  .show-text { padding: 64px 6vw 56px; }
  .show-text h1 { margin-bottom: 20px; }
  .prose p { font-size: 16px; margin-bottom: 26px; }
  .prize { margin: 40px 0 20px; }
  .prize-title { font-size: 26px; }
  .prize-sub { font-size: 17px; }
  .show-prize-lg { width: 70vw; max-width: 340px; margin-top: 20px; }

  .show-acts { padding: 40px 0 0; }
  .acts-wrap { width: calc(100% - 32px); }
  .slider { margin-bottom: 40px; }
  .slider-track { gap: 12px; }
  .slider-track li { flex: 0 0 100%; border-radius: 14px; }
  .slider-prev { left: 4px; }
  .slider-next { right: 4px; }

  .act { margin-top: 32px; border-radius: 16px; }
  .act-bg { aspect-ratio: 16 / 10; }
  .act-box { padding: 20px 20px 30px; }
  .act-rose { width: 110px; margin-bottom: 14px; }
  .act-box h2 { font-size: 28px; }
  .act-box p { font-size: 16px; }

  .show-credits { padding: 56px 6vw 64px; }
  .show-credits h2 { margin-bottom: 36px; }
  .credits { font-size: 16px; }

  .strip { grid-template-columns: 1fr; }

  .lb { padding: 12px; }
  .lb-close { top: 10px; right: 10px; width: 40px; height: 40px; font-size: 28px; }
}