/* Wonderland Essentials — Producciones (carrusel de carteles) */
.wl.wl-productions {
  background: var(--wl-gradient);
  padding: 76px 0 84px;
}
.wl .wl-productions__wrap {
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 var(--wl-page-pad);
}
.wl .wl-productions__title {
  margin: 0 0 36px;
  text-align: center;
  color: var(--wl-gold);
  font-family: var(--wl-font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 3.4vw, 3.4rem);
  line-height: 1;
  letter-spacing: -.01em;
}
.wl .wl-productions__carousel { position: relative; }

/* ---------- Flechas ---------- */
.wl .wl-productions__arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 46px; height: 46px;
  margin-top: -23px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(238,214,172,.45);
  background: transparent;
  color: var(--wl-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, opacity .2s ease;
}
.wl .wl-productions__arrow:hover,
.wl .wl-productions__arrow:focus-visible {
  background: rgba(238,214,172,.12);
  border-color: var(--wl-gold);
  color: var(--wl-gold);
}
.wl .wl-productions__arrow[disabled] { opacity: .35; cursor: default; }
.wl .wl-productions__arrow svg { width: 18px; height: 18px; }
.wl .wl-productions__arrow--prev { left: 0; }
.wl .wl-productions__arrow--next { right: 0; }

/* ---------- Pista y carteles ---------- */
.wl .wl-productions__track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 4px 64px 16px;
  scrollbar-width: none;
}
.wl .wl-productions__track::-webkit-scrollbar { display: none; }
.wl .wl-productions__card {
  color: inherit;
  position: relative;
  flex: 0 0 auto;
  width: calc((100% - 96px) / 5);
  min-width: 190px;
  aspect-ratio: 420 / 609;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 2px;
  display: block;
  background: var(--wl-ink);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.wl .wl-productions__card:hover,
.wl .wl-productions__card:focus-visible {
  border-color: var(--wl-gold);
  box-shadow: 0 0 0 2px var(--wl-gold);
  outline: none;
}
.wl .wl-productions__card img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.wl .wl-productions__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 18px 18px;
  background: linear-gradient(180deg, rgba(6,9,30,0) 0%, rgba(6,9,30,.6) 42%, rgba(6,9,30,.97) 100%);
  opacity: 0;
  transition: opacity .25s ease;
}
.wl .wl-productions__card:hover .wl-productions__overlay,
.wl .wl-productions__card:focus-visible .wl-productions__overlay { opacity: 1; }
.wl .wl-productions__card-title {
  margin: 0 0 8px;
  color: #fff;
  font-family: var(--wl-font-display);
  font-weight: 600;
  font-size: 1.18rem;
  line-height: 1.15;
  letter-spacing: 0;
}
.wl .wl-productions__card-text {
  margin: 0 0 14px;
  color: rgba(255,255,255,.88);
  font-family: var(--wl-font-body);
  font-size: .78rem;
  line-height: 1.45;
}
.wl .wl-productions__cta {
  display: block;
  text-align: center;
  background: var(--wl-gold);
  color: var(--wl-ink-900);
  font-family: var(--wl-font-body);
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 12px 10px;
}

@media (max-width: 1180px) {
  .wl .wl-productions__card { width: calc((100% - 72px) / 4); }
}
@media (max-width: 900px) {
  .wl .wl-productions__card { width: calc((100% - 48px) / 3); min-width: 170px; }
}
/* En pantallas táctiles no hay hover: opcionalmente el texto del cartel se muestra siempre */
@media (hover: none) {
  .wl.wl-productions--touch-info .wl-productions__overlay { opacity: 1; background: linear-gradient(180deg, rgba(6,9,30,0) 35%, rgba(6,9,30,.7) 62%, rgba(6,9,30,.97) 100%); }
}
@media (max-width: 700px) {
  .wl.wl-productions { padding: 48px 0 56px; }
  .wl .wl-productions__wrap { padding: 0; }
  .wl .wl-productions__title { margin-bottom: 20px; padding: 0 22px; }
  .wl .wl-productions__track {
    padding: 4px 8vw 16px;
    gap: 14px;
    scroll-snap-type: x mandatory;
  }
  .wl .wl-productions__card { width: 84vw; min-width: 0; scroll-snap-align: center; }
  /* En móvil las flechas van superpuestas sobre el propio cartel */
  .wl .wl-productions__arrow {
    width: 42px; height: 42px;
    margin-top: -21px;
    background: rgba(10,16,51,.55);
    border: 1px solid rgba(238,214,172,.55);
    backdrop-filter: blur(2px);
  }
  .wl .wl-productions__arrow:hover { background: rgba(10,16,51,.72); }
  .wl .wl-productions__arrow--prev { left: 10px; }
  .wl .wl-productions__arrow--next { right: 10px; }
}